Angular Google Maps使用jsonp加载时，如何获取回调及@ViewChild地图引用？

问题场景 #

通过JSONP方式加载Google Maps API后，尝试在回调中通过@ViewChild获取GoogleMap实例并添加GeoJSON数据，但此时this.map引用始终未被赋值，导致无法操作地图。

原因分析 #

@ViewChild({static: false})的赋值时机在组件ngAfterViewInit钩子之后，而JSONP的回调可能在组件视图尚未完成初始化时就触发，此时地图组件还未被Angular实例化，因此this.map为undefined。

解决方案：利用地图的mapReady事件 #

Angular Google Maps组件提供了mapReady事件，该事件会在地图实例完全初始化、组件视图渲染完成后触发，此时@ViewChild的引用已正确赋值。

修改后的组件代码 #

import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import { GoogleMap } from '@angular/google-maps';
import { catchError, map, Observable, of } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent {
  apiLoaded: Observable<boolean>;

  @ViewChild(GoogleMap, { static: false }) map!: GoogleMap;

  constructor(httpClient: HttpClient) {
    this.apiLoaded = httpClient
      .jsonp('https://maps.googleapis.com/maps/api/js', 'callback')
      .pipe(
        map(() => true),
        catchError((err) => of(false))
      );
  }

  // 地图初始化完成后触发
  onMapReady() {
    this.setGeoJson();
  }

  setGeoJson() {
    if (this.map) {
      this.map.data.addGeoJson(this.geoJson);
    } else {
      console.log('no map!');
    }
  }

  geoJson = {/* GeoJSON数据 */}; 
}

修改后的模板代码 #

在google-map组件上绑定mapReady事件：

<google-map 
  *ngIf="apiLoaded | async"
  (mapReady)="onMapReady()"
  [zoom]="10"
  [center]="{lat: 40.730610, lng: -73.935242}"
></google-map>

原理说明 #

• mapReady事件确保了地图实例和组件视图都已完全初始化，此时@ViewChild获取的GoogleMap引用是有效的。
• 移除了JSONP回调中直接调用setGeoJson的逻辑，避免了视图未初始化导致的引用丢失问题。

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