Ionic 6升级Cordova 10.0.0后Google Maps无报错显示空白如何解决？

解决方案 #

按以下步骤操作即可解决问题：

• 补充地图容器样式
  打开home.page.scss文件，添加如下样式：

  ion-content {
    --padding-start: 0;
    --padding-end: 0;
    --padding-top: 0;
    --padding-bottom: 0;
  }
  #map_canvas {
    width: 100%;
    height: 100%;
  }
  

• 修复Cordova Android 10 资源加载兼容问题
  打开项目根目录的config.xml文件，在<platform name="android">节点下添加配置：

  <preference name="AndroidInsecureFileModeEnabled" value="true" />
  

  Cordova 10默认启用https://localhost作为应用起始地址，该配置可恢复为旧版的file://协议，适配谷歌地图原生插件的资源加载逻辑。
• 移除冲突的web版地图SDK
  你同时引入了原生谷歌地图插件和web版谷歌地图JS SDK，两者存在冲突。打开src/index.html，删除如下代码：

  <script async
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
  </script>
  

  原生谷歌地图插件不需要额外引入web版SDK。
• 升级依赖版本适配Cordova 10
  依次执行以下命令升级相关依赖：

  # 卸载旧版谷歌地图插件
  cordova plugin rm cordova-plugin-googlemaps
  # 安装最新适配Cordova 10的版本，替换为你自己的API密钥
  cordova plugin add cordova-plugin-googlemaps@latest --variable API_KEY_FOR_ANDROID="你的安卓API密钥" --variable API_KEY_FOR_IOS="你的iOS API密钥"
  # 升级@ionic-native/google-maps到最新匹配版本
  npm install @ionic-native/google-maps@latest --save
  

• 清理缓存重建项目
  执行以下命令清理旧的构建缓存，重新生成平台项目：

  cordova platform rm android
  cordova platform add android@10.0.0
  cordova build android
  

• 可选校验：如果完成上述操作后仍有问题，检查谷歌云后台的API密钥配置，确保已经启用了Maps SDK for Android，并且密钥的应用限制绑定了你的应用包名和签名SHA1值，没有超出配额限制。

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