如何在Angular中的地图上动态绘制多边形形状

如何动态绘制多边形形状（未预定义paths）以及如何存储多边形的经纬度值

我已经参考了AGMP多边形 https://angular-maps.com/api-docs/agm-core/directives/AgmPolygon.html但这并没有解决我的问题

2018 年 4 月 26 日更新。

我不确定，但似乎 Angular Google 地图已经支持绘制多边形。你可以检查more https://angular-maps.com/api-docs/agm-core/directives/AgmPolygon.html.

检查工作演示：

1. 基本版（仅绘制多边形）https://stackblitz.com/edit/angular-draw-polygon-google-maps https://stackblitz.com/edit/angular-draw-polygon-google-maps

2. 更新版本（绘制多个多边形和相交检查）https://stackblitz.com/edit/angular-draw-polygon-intersect?file=src/main.ts https://stackblitz.com/edit/angular-draw-polygon-intersect?file=src/main.ts

AGM https://angular-maps.com/是目前 Angular 2 最好的库，但它仍然需要更新更多以反映所有 Google 地图 API。因此，我们最好遵循 Google 地图文档，并在 Angular 社区支持它之前直接使用它。

https://developers.google.com/maps/documentation/javascript/examples/drawing-tools https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

请注意，这是一个非常基本的功能，它允许您绘制多边形并在完成后获取坐标。您可能还想将所有与地图相关的代码移至服务中。

另外，最好将整个代码包装在其中zone.runOutsideAngular以防止不必要的更改检测。

constructor(private zone: NgZone) {

}

ngOnInit() {
    this.zone.runOutsideAngular(() => {
      this.map = new google.maps.Map(document.getElementById('map'), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8
      });

      this.drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.POLYGON,
          drawingControl: true,
          drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: ['polygon']
          }
      });

      this.drawingManager.setMap(this.map);
      google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => {
          // Polygon drawn
          if (event.type === google.maps.drawing.OverlayType.POLYGON) {
            //this is the coordinate, you can assign it to a variable or pass into another function.
              alert(event.overlay.getPath().getArray());
          }
      });
    })        
}