Ionic Capacitor谷歌地图iOS二次加载不显示（定位相关）问题求助

问题核心 #

用Ionic-Angular + Capacitor Google Map开发的App，加入用户定位功能后，iOS设备二次进入页面时地图无法加载，浏览器端完全正常。旧方案均无效，推测问题出在生命周期钩子，但无法自行修复。

问题根源拆解 #

1. Ionic页面缓存特性：默认页面缓存机制下，ngOnDestroy不会在页面导航时触发，导致地图未被正确销毁，二次创建时出现DOM冲突。
2. 异步逻辑处理错误：原代码中调用异步的createMap后直接设置mapReady，状态更新早于地图创建完成，导致二次进入时的状态判断失效。
3. 地图ID生成错误：Math.random.toString()写法错误，生成的是函数字符串而非随机值，导致每次创建的地图ID重复，引发实例冲突。
4. 定位无兜底处理：iOS上定位可能因权限或系统延迟失败，未设置默认坐标会导致地图因空坐标无法加载。

修复步骤及代码 #

修改后的完整代码 #

import { Component, ElementRef, ViewChild, OnDestroy } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';
import { Geolocation } from '@capacitor/geolocation';
import { environment } from 'src/environments/environment';
import { IonViewWillLeave, IonViewWillEnter } from '@ionic/angular';

export class HomePage implements IonViewWillEnter, IonViewWillLeave, OnDestroy {
  @ViewChild('map') mapRef: ElementRef<HTMLDivElement>;
  map: GoogleMap | null = null;
  mapReady = false;

  la: string;
  lo: string;
  lng: number = 116.4074; // 北京坐标兜底
  lat: number = 39.9042;

  async ionViewWillEnter() {
    if (!this.mapReady && this.mapRef.nativeElement) {
      console.log('重新创建地图');
      await this.createMap();
      this.mapReady = true;
    }
  }

  ionViewWillLeave() {
    this.destroyMap();
    this.mapReady = false;
  }

  ngAfterViewInit() {
    this.initMap();
  }

  ngOnDestroy() {
    // 兜底销毁，防止页面被彻底销毁时地图残留
    this.destroyMap();
  }

  async initMap() {
    await this.createMap();
    this.mapReady = true;
    console.log('地图初始化完成');
  }

  async createMap() {
    await this.getCurrentLocation();
    if (!this.mapRef.nativeElement || this.lat === 0 || this.lng === 0) {
      console.warn('地图容器无效或坐标未获取');
      return;
    }
    this.map = await GoogleMap.create({
      id: `map-${Math.random().toString(36).substring(2, 10)}`, // 生成唯一随机ID
      apiKey: environment.mapsKey,
      config: {
        center: {
          lat: this.lat,
          lng: this.lng,
        },
        zoom: 16,
      },
      element: this.mapRef.nativeElement,
      forceCreate: true,
    });
    this.addPolygonsToMap();
    this.addStations();
    this.show_scooters();
  }

  async destroyMap() {
    if (this.map) {
      try {
        await this.map.destroy();
        console.log('地图已销毁');
        this.map = null;
      } catch (error) {
        console.error('销毁地图出错:', error);
      }
    }
  }

  async getCurrentLocation() {
    try {
      const location = await Geolocation.getCurrentPosition({
        enableHighAccuracy: true,
        timeout: 10000, // 设置超时，避免iOS定位阻塞
      });
      this.lat = location.coords.latitude;
      this.lng = location.coords.longitude;
      this.la = this.lat.toString();
      this.lo = this.lng.toString();
    } catch (error) {
      console.error('获取定位失败:', error);
      // 定位失败时使用兜底坐标
    }
  }

  // 保留原有业务方法
  addPolygonsToMap() {
    // 你的实现代码
  }

  addStations() {
    // 你的实现代码
  }

  show_scooters() {
    // 你的实现代码
  }
}

关键修复点说明 #

1. 替换生命周期钩子：用ionViewWillLeave替代ngOnDestroy处理地图销毁，适配Ionic页面缓存机制。
2. 严格异步流程：所有调用createMap的地方均使用await，确保地图创建完成后再更新mapReady状态。
3. 生成唯一地图ID：用Math.random().toString(36)生成随机字符串作为地图ID，避免实例冲突。
4. 定位兜底处理：设置默认坐标，添加定位超时配置，防止iOS上定位失败导致地图加载异常。
5. 增加状态校验：创建地图前校验容器和坐标有效性，避免无效调用。

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