Question

我目前正在检索一组坐标，以便在Google地图上构建多边形。他们的文档以这种方式设置坐标：

// Define the LatLng coordinates for the polygon's path.
    var sampleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757},
      {lat: 25.774, lng: -80.190}
    ];

如何动态添加这些坐标并作为变量传递？

我定义了这个数组：

var poly_array = [];

并遍历我的数据以在测试示例中镜像相同的格式：注意：已在完整代码中定义了lat / lng变量。这只是一个片段

// Inner array with coords
$.each( mArray, function(k, iArray){

    poly_coordinates += '{ lat:';
    poly_coordinates += iArray[1];
    poly_coordinates += ', lng:';
    poly_coordinates += iArray[0];
    poly_coordinates += ' },';

});

// Push coordinates to array
poly_array.push(poly_coordinates);

// Build GMap
district_map = new google.maps.Map(document.getElementById('map'), {
    center : { lat : lat, lng : lng},
               zoom : 15
    });

// Polygon
poly_border = new google.maps.Polygon({

    paths : poly_array,
    strokeColor : '#ff0000',
    strokeOpacity : 0.8,
    strokeWeight : 3,
    fillColor : '#FF0000',
    fillOpacity : 0.35
    });

    poly_border.setMap(district_map);   

// Style map
$('#map').css({ 'width': "100%", 'height': "400px"});

我得到的结果是一个由一对双引号包围的数组，如控制台所示：

Array[0];
0: 
"{lat: 25.774, lng: -80.190},
 {lat: 18.466, lng: -66.118},
 {lat: 32.321, lng: -64.757},
 {lat: 25.774, lng: -80.190}"

这不会生成多边形。如果我删除双引号并手动插入这些值（如上面的示例坐标），它就可以工作。

如何格式化坐标以便将它们作为变量传入并由Polygon对象正确读取？

更新

我修改了代码以包含一个JSON对象数组：

$.getJSON( osdb_url+upper_boundary+'?callback=?', function(i_upper){                        
    if( i_upper.shape && i_upper.shape.length > 0 ){

        $.each( i_upper.shape, function( i, oArray){

            $.each( oArray, function(j, mArray){

                // Inner array with coords
                $.each( mArray, function(k, iArray){
                  poly_array.push({ 'lat' : iArray[1], 'lng' : iArray[0] });
                });

            });

        });
    }                       
});

坐标在那里，但仍未绘制多边形。以下是控制台显示的示例：

Array[0];
0:Object 
  lat: 25.774,
  lng: -80.190,
1:Object
2:Object

等...

Answer 1

坐标需要作为LatLng对象的数组传递。

poly_coordinates = new google.maps.LatLng(iArray[1], iArray[0]);

动态添加坐标到Google Maps Polygon

1 个答案: