Ionic中复用DOM节点实现双谷歌地图功能的报错解决咨询

我之前也踩过这个坑！这个报错的核心原因是Google Maps SDK不允许在同一个DOM元素上重复创建地图实例——第一次调用GoogleMaps.create()后，这个DOM节点会被绑定一个唯一的地图ID，再次调用就会触发冲突。下面是我亲测有效的解决方案：

步骤1：维护地图实例引用，创建前销毁旧实例 #

首先在组件类里定义一个地图实例的变量，每次创建新地图前，先检查是否已有实例，有的话先销毁释放资源：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { GoogleMap, GoogleMaps, LatLng, Geocoder } from '@ionic-native/google-maps';
import { Geolocation } from '@ionic-native/geolocation';

@Component({
  selector: 'app-map-page',
  templateUrl: './map-page.component.html',
})
export class MapPageComponent {
  @ViewChild('mapElement') mapElement!: ElementRef;
  private map: GoogleMap | undefined; // 维护地图实例引用
  customAddress: string = '';

  constructor(private geolocation: Geolocation) {}

  // 通用地图初始化方法
  private async initMap(targetPosition: LatLng) {
    // 关键：先销毁旧地图实例
    if (this.map) {
      await this.map.destroy();
      this.map = undefined;
    }

    // 创建新地图
    const mapContainer = this.mapElement.nativeElement;
    this.map = await GoogleMaps.create(mapContainer, {
      camera: {
        target: targetPosition,
        zoom: 15, // 可根据需求调整缩放级别
      },
    });
  }
}

步骤2：处理两种定位场景 #

不管是获取当前位置，还是自定义输入位置，都调用上面的initMap()方法即可：

获取当前位置 #

async getLocation() {
  try {
    const location = await this.geolocation.getCurrentPosition();
    const currentPosition: LatLng = {
      lat: location.coords.latitude,
      lng: location.coords.longitude,
    };
    await this.initMap(currentPosition);
  } catch (error) {
    console.error('获取位置失败:', error);
  }
}

展示自定义输入的位置 #

如果是通过地址文本获取坐标，需要用到Geocoder服务（记得先安装并导入）：

async showCustomLocation() {
  if (!this.customAddress.trim()) return;
  
  try {
    const geocoder = new Geocoder();
    const geocodeResult = await geocoder.geocode({ address: this.customAddress });
    
    if (geocodeResult.length > 0) {
      await this.initMap(geocodeResult[0].position);
    } else {
      console.error('未找到该地址');
    }
  } catch (error) {
    console.error('地址解析失败:', error);
  }
}

步骤3：模板对应代码 #

确保地图容器有正确的引用和样式，同时添加触发按钮和输入框：

<ion-content>
  <div #mapElement style="width: 100%; height: 350px; margin: 1rem 0;"></div>
  
  <p (click)="getLocation()" style="text-align: center; color: #1976d2; cursor: pointer;">get my location</p>
  
  <ion-item>
    <ion-input [(ngModel)]="customAddress" placeholder="输入地址"></ion-input>
  </ion-item>
  
  <ion-button expand="full" (click)="showCustomLocation()" style="margin-top: 1rem;">
    展示自定义位置
  </ion-button>
</ion-content>

额外注意点 #

• 一定要用await等待map.destroy()完成后再创建新地图，避免异步操作导致的冲突。
• 如果你的Ionic版本较新，确保@ionic-native/google-maps插件已经正确安装和配置（比如Android和iOS的API密钥）。

内容的提问来源于stack exchange，提问作者I Want Answers