angular - 将 DrawingManager 与 @angular/google-maps 一起使用

Question

我一直在尝试使用 DrawingManager使用 Maps API 的官方 Angular 组件包装器，但它没有按预期工作。如果有人可以让它发挥作用，我会很感激能为此找到解决方案。这是我尝试过但没有运气的解决方案的片段和stackblitz链接。 (在 stackblitz 中它无法识别 google 命名空间，但如果您下载它在本地机器上就可以了)

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

https://stackblitz.com/edit/angular-vvwbdg
Github 问题链接:
https://github.com/angular/components/issues/18599
编辑1:
原来问题是 map 没有完全加载和设置 DrawingManager在此之前不会生效。包装器模块中没有加载回调。但是 Angular 的 AfterViewInit 似乎可以很好地完成这项工作。

Answer 1

一旦组件可用，使用 @ViewChild 创建 DrawingManager二传手:
home.component.html:

<div *ngIf="apiLoaded | async">
    <google-map [options]="options"></google-map>
</div>

home.component.ts:

export class HomeComponent implements OnInit {

  @ViewChild(GoogleMap, { static: false }) set map(m: GoogleMap) {
    if (m) {
      this.initDrawingManager(m);
    }
  }

  apiLoaded: Observable<boolean>;
  drawingManager: any;

  options: google.maps.MapOptions = {
    zoom: 18,
    mapTypeId: 'satellite',
    disableDefaultUI: true
  };

  constructor(httpClient: HttpClient) {
    this.apiLoaded = httpClient.jsonp('https://maps.googleapis.com/maps/api/js?key=<API_KEY>&libraries=drawing', 'callback')
      .pipe(
        map(() => true),
        catchError(() => of(false)),
      );
  }

  initDrawingManager(map: GoogleMap) {
    const drawingOptions = {
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          google.maps.drawing.OverlayType.POLYGON,
        ],
      },
      polygonOptions: {
        strokeColor: '#00ff00',
      },
    };
    this.drawingManager = new google.maps.drawing.DrawingManager(drawingOptions);
    this.drawingManager.setMap(map.googleMap);
  }