Ionic Angular接入Google Maps JS API安卓端显示空白无报错问题求助

可行解决思路&修复方案 #

问题根因排查优先级 #

• 首先替换Google Maps脚本加载地址为HTTPS协议
  你当前使用的http://maps.google.com/maps/api/js为明文HTTP地址，安卓9及以上系统默认拦截所有HTTP明文请求，会直接阻断脚本加载，不会抛出可见报错。替换为官方HTTPS地址即可：

  script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';
  

• 兼容Shadow Dom渲染问题
  Ionic组件默认启用Shadow Dom封装，谷歌地图初始化时可能无法正确获取容器的宽高参数，导致渲染空白：
  1. 地图初始化完成后手动触发重绘事件
  2. 给定位请求添加异常捕获，避免定位权限被拒后地图无中心点不渲染
  3. 给地图容器添加足够高的z-index，避免被Ionic原生组件层级遮挡
     修改后的initMap代码参考：

  initMap(){
    this.mapInitialised = true;
    this.geolocation.getCurrentPosition().then((position) => {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      // 手动触发重绘，解决shadow dom下尺寸识别错误问题
      google.maps.event.trigger(this.map, 'resize');
      this.map.setCenter(latLng);
  
      this.map.addListener("click", (e) => {
        this.placeMarker(e.latLng, this.map);
      });
    }).catch(err => {
      // 定位失败时使用默认经纬度初始化，避免地图空白
      let defaultLatLng = new google.maps.LatLng(39.9042, 116.4074); // 可自行替换为其他默认坐标
      let mapOptions = {
        center: defaultLatLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      google.maps.event.trigger(this.map, 'resize');
    });
  }
  

• CSS补充修改
  给地图容器添加层级配置，避免被其他元素遮挡：

  .map {
      margin: 10px 5px 20px;
      border-radius: 20px;
      width: 100%;
      height: 200px;
      z-index: 99999; /* 新增 */
      position: relative; /* 新增，z-index需配合定位属性生效 */
  }
  

• 安卓端配置校验
  检查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" />
  

内容的提问来源于stack exchange，提问作者Diogo Castelo