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

Question

我一直在尝试使用DrawingManagerMaps 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：事实证明，问题是地图没有完全加载并且DrawingManager之前的设置没有生效。包装器模块中没有加载回调。但 Angular 的 AfterViewInit 似乎做得很好。

Answer 1

一旦组件可用，使用 setter 创建 DrawingManager @ViewChild：

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);
  }