Android端Ionic+Capacitor集成Google Map无法显示问题

常见排查与修复步骤 #

• 确认API密钥配置：确保你的Google Maps API密钥已启用Maps JavaScript API和Maps SDK for Android，并且密钥的限制设置正确（不要仅限制浏览器引用，需允许对应Android应用的包名+SHA-1指纹），可在Google Cloud控制台的API密钥页面检查配置。
• 检查权限配置：在Android项目的AndroidManifest.xml中添加必要权限：

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  

• 验证地图容器样式：确保地图对应的DOM元素设置了明确的宽高样式，比如在组件CSS中添加：

  #capacitor-google-maps {
    width: 100%;
    height: 100vh;
    min-height: 500px;
  }
  

  Android端对无尺寸的容器可能无法渲染地图。
• 同步Capacitor与插件版本：确认@capacitor/google-maps插件版本和Capacitor核心版本兼容，建议更新到最新兼容版本后执行同步：

  npm update @capacitor/core @capacitor/google-maps
  npx cap sync android
  

• 查看错误日志：通过Android Studio的Logcat过滤GoogleMap相关日志，通常能找到具体失败原因（如API密钥无效、权限缺失、网络请求失败等）。
• 调整初始化参数：尝试移除disableDefaultUI先测试基础地图是否显示，排除UI配置问题；同时确认this.position的经纬度值有效，避免传入NaN或无效坐标。

代码优化建议 #

给初始化代码增加错误捕获，方便定位问题：

async createMap(map: ElementRef) {
  try {
    this.map = await GoogleMap.create({
      id: "capacitor-google-maps",
      element: map.nativeElement,
      apiKey: environment.googleMapsApiKey,
      config: {
        zoom: 18,
        center: this.position,
        mapTypeId: "satellite",
        disableDefaultUI: true,
      },
      forceCreate: true,
    });

    await this.addMarker(this.position.lat, this.position.lng);
    await this.addListeners();
  } catch (error) {
    console.error('地图初始化失败:', error);
  }
}

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