Angular项目中Google Maps JS API加载完成的检测方法咨询

我完全懂你的需求——就像Google Charts的google.charts.setOnLoadCallback()那样，要确保Google Maps API完全加载就绪后，再执行组件里的地图相关逻辑，对吧？下面给你几个适配Angular场景的实用方案：

方案1：使用Google Maps原生加载监听事件 #

Google Maps API本身提供了全局加载完成的监听方法，你可以在组件里这样实现：

首先，为了避免TypeScript报错，先在项目的typings.d.ts文件（没有的话直接新建一个）里添加类型声明：

declare var google: any;

然后在组件类的ngOnInit钩子中注册监听：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  ngOnInit(): void {
    // 先检查API是否已经加载完成
    if (typeof google !== 'undefined' && google.maps) {
      this.initMap();
    } else {
      // 监听window的load事件，等待API加载完成
      window.google.maps.event.addDomListener(window, 'load', () => {
        this.initMap();
      });
    }
  }

  private initMap(): void {
    // 这里写你的地图初始化逻辑
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    });
  }
}

方案2：自定义轮询检查（兼容复杂场景） #

如果担心原生监听有兼容性问题，你可以自己写一个轮询逻辑，定期检查window.google.maps是否存在，记得要清理定时器避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, OnDestroy {
  private mapLoadInterval: any;

  ngOnInit(): void {
    this.checkMapApiLoaded();
  }

  ngOnDestroy(): void {
    // 组件销毁时务必清理定时器
    if (this.mapLoadInterval) {
      clearInterval(this.mapLoadInterval);
    }
  }

  private checkMapApiLoaded(): void {
    this.mapLoadInterval = setInterval(() => {
      if (typeof google !== 'undefined' && google.maps) {
        clearInterval(this.mapLoadInterval);
        this.initMap();
      }
    }, 100); // 每100ms检查一次，可根据需求调整间隔
  }

  private initMap(): void {
    // 地图初始化逻辑
  }
}

方案3：用RxJS封装可观察对象（Angular响应式风格） #

如果你习惯用RxJS，可以把API加载状态封装成Observable，更贴合Angular的响应式编程理念：

import { Component, OnInit } from '@angular/core';
import { Observable, fromEvent, interval, takeUntil, filter } from 'rxjs';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  ngOnInit(): void {
    this.waitForMapApi().subscribe(() => {
      this.initMap();
    });
  }

  private waitForMapApi(): Observable<void> {
    // 先检查API是否已加载完成
    if (typeof google !== 'undefined' && google.maps) {
      return new Observable(observer => {
        observer.next();
        observer.complete();
      });
    }

    // 同时监听window load事件和轮询检查，确保万无一失
    const loadEvent$ = fromEvent(window, 'load');
    const poll$ = interval(100).pipe(
      filter(() => typeof google !== 'undefined' && google.maps)
    );

    return loadEvent$.pipe(takeUntil(poll$));
  }

  private initMap(): void {
    // 地图初始化逻辑
  }
}

另外提一句：如果打算长期在Angular项目中使用Google Maps，也可以考虑官方的@angular/google-maps包，它已经内置了API加载的处理逻辑，能帮你省不少事~

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