Google地图 - 无法绘制多边形和线条

Question

我正在使用 MEAN Stack 和 Google Maps Api 构建应用程序，在绘制多边形和 LineStrings 。

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

在渲染标记时我没有问题，但在涉及多边形和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);
           }

  });
};

以下是坐标<{1}}的两个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而不是{ {1}}）。它是paths的数组，{lat: [46.774, -48.19], lng: [46.466, -29.119]}和lat都不是数字，它们是数组。