如何在@angular/google-maps中获取google.maps.Map实例？

你可以通过以下两种方式在TypeScript代码中获取原生google.maps.Map实例：

方式一：通过@ViewChild获取模板引用 #

你已经在模板中声明了#mapInstance="googleMap"的导出引用，只需在组件中通过@ViewChild捕获该引用，即可从中提取原生实例：

1. 先导入所需依赖：

import { ViewChild, AfterViewInit } from '@angular/core';
import { GoogleMap } from '@angular/google-maps';

2. 在组件类中声明引用变量，在ngAfterViewInit生命周期中获取实例：

export class YourComponent implements AfterViewInit {
  // 捕获模板中的google-map组件实例
  @ViewChild('mapInstance') mapComponent!: GoogleMap;
  // 存储原生google.maps.Map实例
  private nativeMap!: google.maps.Map;

  ngAfterViewInit(): void {
    // 视图初始化完成后，组件实例已就绪，可直接读取原生实例
    this.nativeMap = this.mapComponent.googleMap as google.maps.Map;
    // 此处可执行对原生地图的操作
  }
}

方式二：通过mapReady事件直接获取（更推荐） #

<google-map>组件自带地图就绪回调事件，会在原生google.maps.Map实例初始化完成后主动触发，无需处理生命周期时机，稳定性更高：

1. 在模板中绑定mapReady事件：

<google-map [center]="{lat: mapaLat, lng: mapaLng}"
            [zoom]="mapaZoom" 
            [options]="{mapTypeControl: true}"
            (mapReady)="handleMapReady($event)">
</google-map>

2. 在组件中实现回调方法，直接接收原生实例：

export class YourComponent {
  private nativeMap!: google.maps.Map;

  handleMapReady(map: google.maps.Map): void {
    this.nativeMap = map;
    // 实例赋值完成后即可进行后续操作
  }
}

内容的提问来源于stack exchange，提问作者piernik