如何在Ionic 3项目中正确安装cordova-google-maps？

我来帮你梳理下Ionic 3中配置谷歌地图插件的正确流程，很多人踩坑都是因为版本兼容或者API配置的细节没做好：

一、前置必做检查 #

• 先确认你的Ionic 3项目环境正常，Node.js建议用8.x-10.x版本（Ionic 3对Node版本有严格兼容性要求）
• 回到谷歌开发者控制台，确保你的API密钥已经启用了对应服务：
  • Android端：启用Maps SDK for Android
  • iOS端：启用Maps SDK for iOS
  • 重点检查密钥的限制规则：Android要绑定你项目的包名（比如com.yourapp.demo），iOS要绑定Bundle ID，这是最容易忽略的报错原因

二、重新执行正确的安装步骤 #

如果之前的安装有残留问题，先清理再重新安装：

1. 卸载现有插件与依赖：

   ionic cordova plugin remove cordova-plugin-googlemaps
   npm uninstall @ionic-native/google-maps @ionic-native/core
   

2. 按顺序重新安装（注意版本号！）：

   # 先安装Cordova原生插件，替换成你的真实API密钥
   ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="你的Android API密钥" --variable API_KEY_FOR_IOS="你的iOS API密钥"
   # Ionic 3只能用@ionic-native v4版本，必须指定版本号
   npm install @ionic-native/core@4.x @ionic-native/google-maps@4.x
   

   划重点：Ionic 3不支持@ionic-native 5.x及以上版本，强行安装会出现大量兼容性报错！

三、项目内的配置与使用 #

1. 在app.module.ts中注册服务：

   import { GoogleMaps } from '@ionic-native/google-maps';
   
   @NgModule({
     declarations: [/* 你的页面组件 */],
     imports: [/* 你的模块导入 */],
     providers: [
       // 把GoogleMaps添加到全局服务列表
       GoogleMaps,
       /* 其他服务 */
     ]
   })
   export class AppModule {}
   

2. 在目标页面中初始化地图（以HomePage为例）：
   在home.ts中编写逻辑：

   import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng } from '@ionic-native/google-maps';
   
   export class HomePage {
     map: GoogleMap;
   
     constructor(private googleMaps: GoogleMaps) {}
   
     ionViewDidLoad() {
       this.initMap();
     }
   
     initMap() {
       // 获取页面中的地图容器元素
       const mapElement = document.getElementById('map');
       // 创建地图实例
       this.map = this.googleMaps.create(mapElement);
   
       // 等待地图加载完成后执行操作
       this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
         console.log('地图加载完成！');
         // 设置地图中心点（示例为旧金山坐标）
         const center = new LatLng(37.7749, -122.4194);
         this.map.moveCamera({
           target: center,
           zoom: 12
         });
       });
     }
   }
   

3. 在home.html中添加地图容器：

   <ion-content>
     <!-- 必须设置明确的宽高，否则地图无法显示 -->
     <div id="map" style="width: 100%; height: 100vh;"></div>
   </ion-content>
   

四、常见问题排查 #

• 地图空白/加载失败：
  • 再次核对API密钥的服务启用状态与限制规则
  • Android设备需确保能访问谷歌服务（国内设备可能需要配置代理或安装谷歌服务框架）
  • 检查地图容器的宽高是否设置正确
• 编译报错：
  • 确认@ionic-native版本是4.x，执行npm list @ionic-native/google-maps查看版本
  • 清理平台缓存：执行ionic cordova platform rm android，再重新添加平台ionic cordova platform add android

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