谷歌地图 - 无法绘制多边形和线串

Question

我正在使用 MEAN Stack 和 Google Maps Api 构建应用程序，但在绘制 多边形 时遇到了一点问题> 和 LineStrings。

我有一组几何图形（点、多边形和线串），每次找到其中一个时，我都需要将其正确添加到地图中。

在渲染标记方面我没有问题，但在多边形和线串方面我有问题。

这是我的代码，其中包含初始化地图的逻辑。

// Initializes the map
function initialize(latitude, longitude, filter) {

   // If map has not been created...
   if (!map) {
      // Create a new map and place in the index.html page
      var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 3,
                center: new google.maps.LatLng(vm.selectedLat, vm.selectedLong)
               });
   }

   // Loop through each location in the array and place a geometry
   locations.forEach(function (n) {

            if(n.type === 'LineString'){

               console.log('LineString '+JSON.stringify(n.coords));
               var linestring = new google.maps.Polyline({
                                 position: n.coords,
                                 map: map,
                                 geodesic: true,
                                 strokeColor: '#0404B4',
                                 strokeOpacity: 1.0,
                                 strokeWeight: 2
                                });

               // For each linestring created, add a listener
               google.maps.event.addListener(linestring, 'click', function () {
                  // When clicked, open the selected linestring's message
                  n.message.open(map, linestring);
                });

                linestring.setMap(map);
            }
            if(n.type === 'Polygon'){

               console.log('Polygon '+JSON.stringify(n.coords));
               var polygon = new google.maps.Polygon({
                               path: n.coords,
                               geodesic: true,
                               strokeColor: '#0404B4',
                               strokeOpacity: 0.8,
                               strokeWeight: 3,
                               fillColor: '#0404B4',
                               fillOpacity: 0.35
                        });

                // For each polygon created, add a listener
                google.maps.event.addListener(polygon, 'click', function () {
                    // When clicked, open the selected polygon's message
                    n.message.open(map, polygon);
                });

                polygon.setMap(map);
           }

  });
};

这里是坐标的两个console.log()的截图

正如您从屏幕截图中看到的那样，我也得到了 InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number

我试图找到解决方案，但没有成功。

为什么我不能绘制这些几何图形？如何解决 InvalidValueError？

提前致谢。

Answer 1

问题：

• google.maps.Polyline 没有position 属性，它有一个path 属性，它接受google.maps.LatLngLiterals 的数组（看起来像您传递给position 属性的内容)。

• google.maps.Polygon 有一个paths 属性，该属性采用google.maps.LatLngLiterals 数组，但您的数据格式不正确（您使用的是path 而不是paths）。它是{lat: [46.774, -48.19], lng: [46.466, -29.119]}的数组，lat和lng都不是数字，它们是数组。