Angular SPA中两个页面分别显示Google Maps的问题求助

问题根源 #

1. 两个组件的地图容器使用了相同的ID map，document.getElementById("map")会返回DOM中第一个匹配的元素，路由切换时可能拿到前一个组件未完全销毁的容器，导致新地图初始化失败。
2. 组件销毁时未清理Google Maps实例，残留的实例会干扰新地图的创建。
3. 路由切换后地图容器的DOM状态变化，未触发地图的resize事件，导致地图无法正确渲染。

解决方案 #

1. 为每个组件的地图容器设置唯一ID

修改两个组件的HTML，将地图容器的ID改为唯一值：

ExploreComponent HTML

<div id="explore-map" style="width: 100%; height: 95%;"></div>

第二个组件 HTML

<div id="detail-map" style="width: 100%; height: 250px; margin: auto; border-radius: 5px;margin-top: 5px;"></div>

对应修改TS中的getElementById参数：

ExploreComponent TS 部分修改

initMap() {
  const myLatLng = { lat: 45.902780, lng: 16.496370 };

  this.map = new google.maps.Map(
    document.getElementById("explore-map") as HTMLElement,
    {
      zoom: 6,
      center: myLatLng,
      streetViewControl: false,
      fullscreenControl: false
    }
  );
  // 其余代码不变...
}

第二个组件 TS 部分修改

initMap() {
  const myLatLng = { lat: 41.902780, lng: 12.496370 };

  this.map = new google.maps.Map(
    document.getElementById("detail-map") as HTMLElement,
    {
      zoom: 6,
      center: myLatLng,
    }
  );
}

2. 组件销毁时清理地图实例

实现OnDestroy接口，在组件销毁时销毁地图实例，避免内存泄漏和干扰：

ExploreComponent TS 修改

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

export class ExploreComponent implements OnInit, AfterViewInit, OnDestroy {
  // 原有代码...

  ngOnDestroy(): void {
    if (this.map) {
      this.map.setMap(null);
      this.map = undefined;
    }
    if (this.infoWindow) {
      this.infoWindow.close();
      this.infoWindow = undefined;
    }
  }
}

第二个组件 TS 修改

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

export class SecondMapComponent implements OnInit, AfterViewInit, OnDestroy {
  map?: google.maps.Map;

  // 原有代码...

  ngOnDestroy(): void {
    if (this.map) {
      this.map.setMap(null);
      this.map = undefined;
    }
  }
}

3. 初始化后触发地图resize事件（可选但推荐）

在initMap完成后，触发resize事件确保地图正确适配容器尺寸：

在两个组件的initMap末尾添加

setTimeout(() => {
  if (this.map) {
    google.maps.event.trigger(this.map, 'resize');
    this.map.setCenter(myLatLng);
  }
}, 100);

额外优化建议 #

避免直接使用document.getElementById，改用Angular的@ViewChild获取DOM元素，更符合组件化规范：
比如在ExploreComponent中：

import { ViewChild, ElementRef } from '@angular/core';

export class ExploreComponent implements OnInit, AfterViewInit {
  @ViewChild('exploreMap') mapContainer!: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    this.initMap();
  }

  initMap() {
    const myLatLng = { lat: 45.902780, lng: 16.496370 };

    this.map = new google.maps.Map(
      this.mapContainer.nativeElement,
      {
        zoom: 6,
        center: myLatLng,
        streetViewControl: false,
        fullscreenControl: false
      }
    );
    // 其余代码不变...
  }
}

对应的HTML改为：

<div #exploreMap style="width: 100%; height: 95%;"></div>

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