如何使用 angular google 地图获取绘制的 ploygon 的坐标 (AGM)

Question

我正在开发一项功能，用户应该能够绘制 polygon 并将 polygon coordinates 存储到系统中，以便稍后在地图上显示它。我在这里实现了绘图功能： https://stackblitz.com/edit/angular-ptjb9t?file=src%2Fapp%2Fapp.component.html

但是我怎样才能得到那个多边形的坐标 "points(lat,lng)"？

谢谢

Answer 1

我通过监听 polygoncomplete 事件弄明白了，从中你可以得到如下所示的多边形坐标：

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
  const len = polygon.getPath().getLength();
  const polyArrayLatLng = [];

  for (let i = 0; i < len; i++) {
    const vertex = polygon.getPath().getAt(i);
    const vertexLatLng = {lat: vertex.lat(), lng: vertex.lng()};
    polyArrayLatLng.push(vertexLatLng);
  }
  // the last point of polygon should be always the same as the first point (math rule)
  polyArrayLatLng.push(polyArrayLatLng[0]);


  console.log('coordinates', polyArrayLatLng);
});

stackblitz，参考资料： google maps documentation

如何使用 angular google 地图获取绘制的 ploygon 的坐标 (AGM)

How to get the coordinates of a drawn ploygon using angular google maps (AGM)

google-maps

angular-google-maps