解析Json以使用谷歌地图v3显示折线/标记

时间:2010-06-21 02:32:55

标签: jquery json google-maps-api-3 polyline

我正在使用Jquery getJson()生成一个json,以显示在google maps 3 api上。 我想按照以下方式显示多边形线: 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的:

$.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返回一个字符串,其中包含[new google.maps.LatLng(lat,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数组吗?或者什么是显示折线的最佳方法。

1 个答案:

答案 0 :(得分:2)

我的网站(http://www.cyclistsroadmap.com)上有类似的路线查找器。

如果使用Googles路线查找器,您可以使用返回的DirectionsObject。当我使用我存储在数据库中的数据时,我只是将其作为包含所有lat,lng坐标的2d数组发回。 (我只是进行常规的AJAX调用,而不是$ .getJSON调用.AJAX返回一个JSON字符串。