【问题标题】:Adding Coordinates Dynamically to Google Maps Polygon将坐标动态添加到 Google 地图多边形
【发布时间】: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


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 2015-08-08
    • 2020-02-17
    • 1970-01-01
    • 1970-01-01
    • 2014-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多