2010-06-21 2 views
1

Google Maps 3 api에 표시 될 json을 생성하기 위해 Jquery getJson()을 사용하고 있습니다.구글 맵핑으로 폴리 라인/마커를 표시하는 Json 구문 분석 v3

$.getJSON("routefinder", { "lat1": lat1 , "lng1": lng1 , "lat2": lat2 , "lng2": lng2 }, function(json) { 
    var poly = new google.maps.Polyline({ 
     path: json, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    poly.setMap(map); 
}); 

는 $ .getJSON이 문자열을 반환 폴리 라인은 [새로운은 google.maps.LatLng 좌표로 : polyline-simple example

function initialize() { 
    var myLatLng = new google.maps.LatLng(0, -180); 
    var myOptions = { 
     zoom: 3, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var flightPlanCoordinates = [ 
     new google.maps.LatLng(37.772323, -122.214897), 
     new google.maps.LatLng(21.291982, -157.821856), 
     new google.maps.LatLng(-18.142599, 178.431), 
     new google.maps.LatLng(-27.46758, 153.027892) 
    ]; 
    var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
    } 

JQuery와 : 당으로 나는 폴리 라인을 표시 할 것 (위도, LNG)] 형식 :

[ new google.maps.LatLng(53.369567, -6.323699), new google.maps.LatLng(53.367705, -6.317386),new google.maps.LatLng(53.337705,-6.917386), new google.maps.LatLng(53.397705,-6.47386)] 

제가 은 google.maps.LatLng 객체를 포함 JSON 배열을 반환 할 수 있지만 어떤 광고가 발생하지 않는다? 또는 폴리 라인을 표시하는 가장 좋은 방법은 무엇입니까?

답변

2

나는 내 사이트 (http://www.cyclistsroadmap.com)와 비슷한 것을 경로 찾기 용으로 사용하고 있습니다.

Googles routefinder를 사용하는 경우 돌아 오는 DirectionsObject를 사용할 수 있습니다. 데이터베이스에 저장 한 데이터를 사용할 때 모든 lat, lng 좌표를 포함하는 2 차원 배열로 다시 보냅니다. (그냥 AJAX 호출을하지 않고 $ .getJSON 호출을 수행합니다 .AJAX는 JSON 문자열을 반환합니다.

+0

이 튜토리얼은 매우 유용합니다. http://arunxjacob.blogspot.com/2010/04/using- google-maps-api-v3-jquery.html – patrickandroid

+0

@paullb 1 년 정도 도로지도를 만들었으므로 놀랐습니다. json에서 폴리 라인 코드를로드하는 것이 여기에서 주도적이었고, 내가 본 것을 좋아합니다! – panhandel