时间戳

首页 > 解决方案 > 将 DrawingManager 与 @angular/google-maps 一起使用

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

问题描述

我一直在尝试使用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 似乎做得很好。

标签： angulargoogle-mapsgoogle-maps-api-3angular-material

解决方案

一旦组件可用，使用@ViewChildsetter 创建 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);
  }

推荐阅读