错误折线谷歌地图

时间:2015-02-18 19:03:56

标签: javascript arrays google-maps

$.getJSON('/polyline/', function(data) { 
        $.each( data.markers, function(i, line) {
              var infowindow = new google.maps.InfoWindow({
                  content: line.title,
              });

                var line_lat_lon = new google.maps.LatLng(line.latitude, line.longitude);
                var line = new google.maps.Polyline({
                    path: line_lat_lon,
                    strokeColor: "#FF0000",
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    map: map_canvas,
            });

            google.maps.event.addListener(line, 'click', function() {
                infowindow.open(map_canvas,line);
            });             
        });
      });

嗨,我需要在地图上画一条线,所以我使用了谷歌地图功能 Polyline 。 我收到错误是因为google.maps.Polyline需要一个LatLng数组来创建该行。 有人可以帮我把 line_lat_lon 变成一个数组来解决这个问题吗? 感谢。

示例JSON(来自评论):

{"markers": [{"latitude": "-27.48699568", "longitude": "-48.732537\r"},
{"latitude": "-27.48777704", "longitude": "-48.73220148\r"}, 
{"latitude": "-27.48987386", "longitude": "-48.73255083\r"}, 
{"latitude": "-27.49196204", "longitude": "-48.73290095\r"}, 
{"latitude": "-27.49375971", "longitude": "-48.73111728\r"}, 
{"latitude": "-27.49701558", "longitude" ... (cutoff)

1 个答案:

答案 0 :(得分:1)

您需要将折线传递给google.maps.LatLng对象数组:

$.getJSON('/polyline/', function(data) { 
    var line_lat_lon = [];
    $.each( data.markers, function(i, line) {
          var infowindow = new google.maps.InfoWindow({
              content: line.title,
          });

          line_lat_lon.push(new google.maps.LatLng(line.latitude, line.longitude));


          google.maps.event.addListener(line, 'click', function() {
              infowindow.open(map_canvas,line);
          });             
    });
    var line = new google.maps.Polyline({
                path: line_lat_lon,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2,
                map: map_canvas,
        });
});