android - Ionic Angular Google maps javascript API 适用于浏览器和 Ios，但不适用于 Android

Question

我很难弄清楚为什么我的代码可以在 web 和 ios 上轻松运行，但在 Android 上显示一个空白 div 而没有任何错误。我正在使用 Ionic Angular，并且我已经对 API 密钥进行了三次检查。我的猜测是它与 shadow-root 有关，但我每次尝试修复它都失败了。对于我可能缺少的任何见解，我将非常感激，在此先感谢！

HTML：

<ion-content fullscreen class="mapContent">
  <ion-grid class="container mapContent">
    <ion-row class="mapContent">
      <div #map id="map" class="map"></div>
    </ion-row>
  </ion-grid>
</ion-content>

TS：

@ViewChild('map') mapElement: ElementRef;

map: any;

constructor(
    private geolocation: Geolocation,
  ) {}


ionViewDidEnter() {
    this.loadGoogleMaps();
  }

  loadGoogleMaps(){
    window['mapInit'] = () => {
      this.initMap();
    }

    let script = document.createElement("script");
    script.id = "googleMaps";
    script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';

    document.body.appendChild(script);
  }

  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);

      this.map.addListener("click", (e) => {
        this.placeMarker(e.latLng, this.map);
      });
    });
  }

CSS：

ion-content.mapContent {
  --background: transparent !important;
}

ion-grid.mapContent {
  --background: transparent !important;
}

ion-row.mapContent {
  --background: transparent !important;
}

.map {
    margin: 10px 5px 20px;
    border-radius: 20px;
    width: 100%;
    height: 200px;
}

标签： androidcssangulargoogle-mapsionic-framework