Angular Google map组件路由跳转后返回仅显示部分地图如何解决

• Google Maps 实例初始化时会读取当前容器的宽高计算绘制区域，路由跳转离开地图页时，地图容器会被设置为display: none或者直接从DOM中移除，此时容器尺寸为0，Google Maps默认不会主动监听容器尺寸变化。
• 切回地图页时，容器恢复正常尺寸，但Google Maps实例没有触发重新计算渲染区域的逻辑，就会出现仅显示部分区域、剩余区域为灰色的问题。

首先你需要在组件中获取到google-map组件的实例，修改你的组件代码：

import { GoogleMap } from '@angular/google-maps';
import { NavigationEnd, Router } from '@angular/router';
// 如果是Ionic项目可以导入Ionic的生命周期钩子
// import { IonViewWillEnter } from '@ionic/angular';

export class YourMapComponent {
  // 绑定模板中的google-map组件
  @ViewChild(GoogleMap) map!: GoogleMap;

  constructor(private router: Router) {}
}

接下来根据你的项目场景选择对应触发重绘的逻辑：

场景1：使用Ionic Tabs #

监听Ionic的页面激活钩子，切回页面时手动触发地图重绘：

ionViewWillEnter() {
  if (!this.map?.googleMap) return;
  // 触发地图resize事件，重新计算绘制区域
  google.maps.event.trigger(this.map.googleMap, 'resize');
  // 可选：如果地图中心点偏移，重新设置中心点
  const mapCenter = this.location?.googleMap?.mapOptions?.center;
  if (mapCenter) {
    this.map.googleMap.setCenter(mapCenter);
  }
}

场景2：普通Angular路由 #

监听路由变化，当地图路由激活时触发重绘：

ngOnInit() {
  this.router.events.subscribe(event => {
    // 替换为你的地图页路由地址
    if (event instanceof NavigationEnd && event.url === '/tabs/map') {
      // 加0延迟确保DOM渲染完成，容器尺寸已恢复
      setTimeout(() => {
        if (this.map?.googleMap) {
          google.maps.event.trigger(this.map.googleMap, 'resize');
        }
      }, 0);
    }
  });
}

通用兜底方案 #

用ResizeObserver监听地图容器尺寸变化，只要尺寸改变就自动触发重绘，无需手动监听路由：

ngAfterViewInit() {
  const mapObserver = new ResizeObserver(() => {
    if (this.map?.googleMap) {
      google.maps.event.trigger(this.map.googleMap, 'resize');
    }
  });
  // 监听地图容器元素
  mapObserver.observe(this.map.googleMap.getDiv());
}

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