如何在Ionic 3+Angular 5中处理Google Maps API回调解决加载不稳定问题

嘿，这个问题我之前在Ionic 3项目里也碰到过！Google Maps JS API的异步加载确实很容易和Angular的组件生命周期不同步，导致google is not defined的报错，我给你两个靠谱的解决办法：

这个方法保留你原有的index.html脚本引入方式，通过Promise来监听API加载完成的回调：

1. 修改index.html里的API脚本，把回调名称改成自定义的（比如googleMapsReady）：

<!-- GOOGLE MAP -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=googleMapsReady"></script>
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>

2. 创建一个Angular服务（比如map-loader.service.ts），封装地图加载的等待逻辑：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MapLoaderService {
  private mapLoaded: Promise<void>;

  constructor() {
    // 用Promise监听全局回调的触发
    this.mapLoaded = new Promise((resolve) => {
      // 在window上定义全局回调函数
      (window as any).googleMapsReady = () => {
        resolve();
      };
    });
  }

  // 对外暴露等待地图加载完成的方法
  waitForMapLoad(): Promise<void> {
    return this.mapLoaded;
  }
}

3. 在你的home.ts里，注入服务并等待加载完成后再初始化地图：

import { Component, OnInit } from '@angular/core';
import { MapLoaderService } from './map-loader.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  constructor(private mapLoader: MapLoaderService) {}

  ngOnInit() {
    // 确保Google Maps加载完成后再执行initMap
    this.mapLoader.waitForMapLoad().then(() => {
      this.initMap();
    });
  }

  initMap() {
    // 这里可以安全使用google对象了
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    });
  }
}

这个方法不需要在index.html里提前引入脚本，而是由Angular服务动态创建并加载脚本，完全控制加载流程：

1. 创建map-loader.service.ts服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MapLoaderService {
  private mapLoaded: Promise<void>;

  constructor() {
    this.mapLoaded = this.loadMapScript();
  }

  private loadMapScript(): Promise<void> {
    return new Promise((resolve, reject) => {
      // 先检查API是否已经加载过，避免重复加载
      if (window['google']) {
        resolve();
        return;
      }

      // 创建script标签
      const script = document.createElement('script');
      script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places';
      script.async = true;
      script.defer = true;

      // 脚本加载完成的回调
      script.onload = () => {
        resolve();
      };

      // 脚本加载失败的处理
      script.onerror = () => {
        reject(new Error('Failed to load Google Maps API'));
      };

      // 将脚本添加到页面头部
      document.head.appendChild(script);
    });
  }

  waitForMapLoad(): Promise<void> {
    return this.mapLoaded;
  }
}

2. home.ts里的用法和方法一完全一样，注入服务后等待加载完成再执行initMap即可。

两种方法的核心都是确保Google Maps API完全加载完成后，再执行你的地图初始化代码，这样就彻底消除了加载不同步的不稳定问题。第二种方法更符合Angular的组件化思想，也避免了对全局函数的依赖，我个人更推荐这种方式。

内容的提问来源于stack exchange，提问作者Med Karim Garali