从 @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

正如官方文档中提到的，您可以使用 ViewChild 装饰器访问地图实例，并且似乎您已经将其添加到组件 HTML 中，您只需要在包装器组件打字稿中定义它，如下所示：

 @ViewChild(GoogleMap) googleMap: GoogleMap;

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

Answer 2

我的用例是在添加几个标记并设置边界后重新聚焦地图。

使用@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);

  }