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

【问题标题】：Using DrawingManager with @angular/google-maps将 DrawingManager 与 @angular/google-maps 一起使用
【发布时间】：2020-06-13 08:01:26
【问题描述】：

我一直在尝试将 DrawingManager 与 Maps API 的官方 Angular 组件包装器一起使用，但它没有按预期工作。如果有人可以让它工作，我会很感激能得到一个解决方案。这是我尝试但没有运气的解决方案的 sn-p 和 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 似乎做得很好。

【问题讨论】：

标签： angular google-maps google-maps-api-3 angular-material

【解决方案1】：

首先您需要添加一个 Google API Key 才能使用 maps api，描述为 here。

对于 Angular，建议使用 angular-maps 组件。 Here 你可以找到一个有效的 Stackblitz。

如果你想在没有 agm 的情况下工作，你必须实现自己的服务来加载脚本，就像在 this Stackblitz 中所做的那样。

【讨论】：

感谢您的回答，我已故意从 stackblitz 中删除了 api 密钥，因为无法公开不受限制的 api 密钥，而且无论如何它都可以在开发模式下工作。手动加载是一种选择，但不完全是我想要的。我的观点是使用官方谷歌地图组件的可能性，因为它可能比手动加载更干净，我认为使用官方地图组件比 agm 更好。如果没有找到解决方案，我会选择 agm，再次感谢
Np，如果你喜欢看这里stackoverflow.com/help/someone-answers

【解决方案2】：

我遇到过这样的讨论：

https://github.com/angular/components/issues/17828

https://github.com/angular/components/issues/18015

How can I check whether Google Maps is fully loaded?

Maps 组件的主要贡献者表示他不打算添加加载回调或与底层地图 API 相关的任何内容，因此我采用了另一种 hacky 方法来了解地图是否加载到组件内。

component.ts：

mapLoaded = false;
idleMap(event: any)  {
    if(this.mapLoaded)
      return;
    this.mapLoaded = true;
    this.drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      map:this.map._googleMap,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
      }
    });
    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => {
      if (event.type === google.maps.drawing.OverlayType.POLYGON) {
        let ar = event.overlay.getPath().getArray();
        ar.push(ar[0]);
        this.model.location.push(ar);
      }
    });
  }

html：

<google-map
    (tilesloaded)="idleMap($event)">
  </google-map>

【讨论】：

【解决方案3】：

在组件可用后使用@ViewChild setter 创建 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);
  }

【讨论】：