从@angular/google-maps 获取 google.maps.Map 实例

Question

我需要google.maps.Map。我在文档中看不到 official 方式。但我看到整个组件是 exportedAs。但是当我在模板中使用它时：

<google-map [center]="{lat: mapaLat, lng: mapaLng}"
                [zoom]="mapaZoom" [options]="{mapTypeControl: true}"
                #mapInstance="googleMap"></google-map>

是局部变量。如何在我的组件的打字稿中获取它？

或者有其他方法可以得到 google.maps.Map?

Answer 1

如 official documents 中所述，您可以使用 ViewChild 装饰器访问地图实例，并且您似乎已经将其添加到组件中 HTML，您只需要在包装器组件打字稿中定义它，例如这个：

 @ViewChild(GoogleMap) googleMap: GoogleMap;

然后使用它，也许你需要在调用AfterViewInit之后开始使用它，以确保地图组件初始化

Answer 2

我的用例是 re-focusing 添加多个标记并设置边界后的地图。

使用 @ViewChild 对我不起作用，我不得不使用 mapInitialized 事件来访问地图实例。

<google-map (mapInitialized)="onMapReady($event)" [center]="center" [zoom]="zoom" [options]="mapOptions"> ... </google-map>

  /**
   * Fit bounds and show all available markers after the map is fully loaded
   * @param {google.maps.Map} map : Google Map Instance
   */
  public onMapReady(map: google.maps.Map): void {
    
    map.fitBounds(this.bounds, 20);

  }

从@angular/google-maps 获取 google.maps.Map 实例

Getting google.maps.Map instance from @angular/google-maps

angular-google-maps

angular

angular-cdk