如何使用@agm-core在有角度的谷歌地图上绘制多边形？

在我的应用程序中，我使用 Angular Google Maps (AGM) 来构建地图。如何在其上绘制多边形？我按照中描述的解决方案进行操作https://stackblitz.com/edit/agm-polygon https://stackblitz.com/edit/agm-polygon但缺少一些指令。如何在 AGM 地图上启用绘图管理器并像示例中那样绘制多边形？

这是 app.module 中的导入：

AgmCoreModule.forRoot({
      apiKey: 'key',      
      language: localStorage && localStorage.defaultLang || 'el',
      libraries: ['places', 'drawing', 'geometry']
    })

您很可能会遇到与以下内容相关的错误agm-drawing-manager组件，对吗？它出现agm-drawing-manager指令中使用的提供演示 https://stackblitz.com/edit/agm-polygon不再属于angular-google-maps library https://github.com/SebastianM/angular-google-maps (1.0.0-beta.5版本），这就是发生这些错误的原因。

要启用 Google 地图绘图工具，可以考虑以下解决方案（改编自官方示例 https://developers.google.com/maps/documentation/javascript/examples/drawing-tools):

app.component.html

<agm-map [latitude]="center.lat" [longitude]="center.lng" (mapReady)="onMapReady($event)"> 
</agm-map> 

app.component.ts

import { Component } from "@angular/core";
declare const google: any;

@Component({
  selector: "app-map",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  center: any = {
    lat: 33.5362475,
    lng: -111.9267386
  };

  onMapReady(map) {
    this.initDrawingManager(map);
  }

  initDrawingManager(map: any) {
    const options = {
      drawingControl: true,
      drawingControlOptions: {
        drawingModes: ["polygon"]
      },
      polygonOptions: {
        draggable: true,
        editable: true
      },
      drawingMode: google.maps.drawing.OverlayType.POLYGON
    };

    const drawingManager = new google.maps.drawing.DrawingManager(options);
    drawingManager.setMap(map);
  }
}

例如，可以通过引入单独的指令来进一步改进google.maps.drawing.DrawingManager class

先决条件

In app.module.ts不要忘记加载drawing通过 AgmCoreModule 模块进行封装：

AgmCoreModule.forRoot({
  apiKey: "--YOUR-GOOGLE_MAPS_KEY-GOES-HERE--",
  libraries: ['drawing']
})

这是一个演示 https://stackblitz.com/edit/angular-ptjb9t供你参考