Ionic 2+Cordova Android7原生Google Maps插件地图无法显示

我太懂这种把官方排障指南翻烂了还是看不到地图的挫败感了！结合你用Ionic 2 + Cordova Android 7 + 原生Google Maps插件的场景，我再给你梳理几个容易被忽略的排查方向，说不定能帮你解决空白地图的问题：

1. 补全地图初始化代码，确保时机和错误监听 #

你的TS代码只写了开头部分，很可能是初始化逻辑不完整或者时机不对。一定要在Platform ready之后初始化地图，同时添加错误监听来定位问题：

import { NavController, Platform } from 'ionic-angular';
import { Component } from '@angular/core';

// 声明全局Google对象，避免TypeScript报错
declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: ['home.scss']
})
export class HomePage {
  map: any;

  constructor(public navCtrl: NavController, public platform: Platform) {
    // 等待Cordova平台完全就绪再初始化地图
    platform.ready().then(() => {
      this.initMap();
    });
  }

  initMap() {
    const mapOptions = {
      center: new google.maps.LatLng(37.7749, -122.4194), // 示例坐标，可替换成你需要的位置
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    // 确保能正确获取到地图容器DOM
    const mapElement = document.getElementById('map_canvas');
    if (!mapElement) {
      console.error('找不到map_canvas容器');
      return;
    }

    this.map = new google.maps.Map(mapElement, mapOptions);

    // 添加加载完成和错误监听，方便排查问题
    google.maps.event.addListener(this.map, 'tilesloaded', () => {
      console.log('✅ 地图瓦片加载完成');
    });
    google.maps.event.addListener(this.map, 'error', (err) => {
      console.error('❌ 地图初始化错误:', err);
    });
  }
}

2. 核对Cordova Android 7的权限和API密钥配置 #

Cordova Android 7的权限机制有变化，同时API密钥的配置细节很容易出错：

• 确保config.xml里添加了必要权限：

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

• 检查Google Cloud Console的API密钥：
  • 确认已经启用了Maps SDK for Android服务；
  • 密钥的应用限制要准确匹配：包名是你config.xml里的id属性值，SHA-1指纹要使用你当前调试/打包环境的（debug环境用debug keystore的SHA-1，release用正式keystore的）；
  • 不要把Android的API密钥和iOS的搞混了。

3. 修复地图容器的高度问题 #

你的CSS设置了#map_canvas的宽高为100%，但Ionic页面的父容器（比如ion-content、scroll-content）可能没有设置高度，导致地图容器无法撑满屏幕。可以修改CSS确保所有父容器都占满屏幕：

page-home, ion-content, .scroll-content {
  height: 100% !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 100%;
  width: 100%;
}

或者更直接用绝对定位：

#map_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

4. 验证插件与Cordova Android版本的兼容性 #

Cordova Android 7和Google Maps插件v1.4.0是否兼容？可以尝试重新安装插件，指定版本并确认API密钥参数正确：

# 先卸载旧插件
cordova plugin remove cordova-plugin-googlemaps
# 重新安装指定版本，替换成你的Android API密钥
cordova plugin add cordova-plugin-googlemaps@1.4.0 --variable API_KEY_FOR_ANDROID="你的API密钥"

5. 查看Android Logcat的详细错误日志 #

这是最能定位问题的方法，用adb logcat过滤Google Maps相关的日志：

adb logcat | grep -i maps

日志里会明确告诉你是API密钥无效、服务未启用、权限被拒还是其他问题，比浏览器控制台的信息详细得多。

如果尝试完以上方法还是不行，建议提供Logcat的错误日志和完整的初始化代码，这样能更精准地定位问题！

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