如何在Ionic 3模态框中显示Native Google Maps？

我之前在Ionic 3标签页项目里也碰到过几乎一模一样的问题！模态框里集成Google Maps时总是出现诡异的透明窗口，试了ion-app._gmaps_cdv_ .nav-decor{ background-color: transparent !important; }这个方案也没见效，折腾好一阵才梳理出几个有效的解决办法，分享给你：

1. 给模态框绑定专属样式并强化优先级 #

首先，在创建模态框时指定一个自定义CSS类，避免全局样式冲突：

// 调用模态框的页面代码
const mapModal = this.modalCtrl.create(MapModalPage, {}, {
  cssClass: 'custom-map-modal',
  showBackdrop: true
});
mapModal.present();

然后在app.scss中针对这个类添加样式，同时覆盖地图相关的层级和背景：

.custom-map-modal {
  // 确保模态框内容区背景不透明
  ion-content {
    background-color: #ffffff !important;
  }
  // 强制覆盖导航装饰层的背景
  .nav-decor {
    background-color: transparent !important;
  }
  // 给地图容器设置明确的尺寸和层级
  #map_canvas {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 10 !important;
  }
}

2. 延迟地图初始化到模态框完全渲染后 #

Ionic 3的模态框ionViewDidLoad触发时，DOM可能还没完全渲染完成，这时候初始化地图容易出现渲染异常。建议把地图初始化放在ionViewDidEnter生命周期钩子中：

// 模态框页面代码
ionViewDidEnter() {
  // 等模态框完全显示后再初始化地图
  this.initGoogleMap();
}

private initGoogleMap() {
  const mapOptions: GoogleMapOptions = {
    camera: {
      target: { lat: 39.9042, lng: 116.4074 },
      zoom: 14
    }
  };
  this.map = GoogleMaps.create('map_canvas', mapOptions);
  
  // 后续添加标记、监听事件等逻辑
}

3. 关闭模态框时销毁地图实例 #

如果地图实例没有被正确销毁，可能会残留渲染问题，同时也会造成内存泄漏。在关闭模态框前记得销毁地图：

// 模态框页面代码
closeModalWithData(selectedLocation: any) {
  // 销毁地图实例
  if (this.map) {
    this.map.remove();
  }
  // 返回数据到调用页面
  this.viewCtrl.dismiss(selectedLocation);
}

4. 排查插件版本兼容性 #

Ionic 3对第三方插件版本有严格要求，如果你使用的@ionic-native/google-maps版本过高（比如v5+），很可能会出现兼容性问题。建议锁定到适配Ionic 3的版本：

# 安装适配Ionic 3的版本
npm install @ionic-native/google-maps@4.20.0 --save

如果以上方案都试过还是没解决，可以用Chrome开发者工具的元素审查功能，查看模态框和地图容器的实际样式，确认是否有其他全局样式在覆盖你的配置。

内容的提问来源于stack exchange，提问作者Setu Kumar Basak