【发布时间】:2017-07-17 07:57:54
【问题描述】:
我目前正在检索一组坐标以在 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 变量已在完整代码中定义。这只是一个sn-p
// 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
等等……
【问题讨论】:
-
如果你想要一个数组,为什么要把它格式化为字符串?
-
我希望像页面顶部的示例一样镜像坐标的格式。有什么更好的选择来实现这一点?
-
将数据创建为 JSON 对象数组,而不是看起来像 JSON 对象数组的字符串。
-
见上面的更新。 JSON 对象在数组中,但仍然没有多边形。数组中的元素个数不应该是0吗?
标签: jquery api google-maps