Question

我正在为我的Ionic 3使用ionic-native/google-maps插件。谷歌地图之前的工作方式如下：

突然，它开始显示白色背景，但是带有InfoWindow，如下所示：

我没有更改任何代码。我最近在Google控制台中为此项目添加了一个结算帐户。

在 package.json 中：

 "dependencies": {
    "@ionic-native/google-maps": "^4.9.1",
    "cordova-plugin-googlemaps": "^2.3.8"
 },
 "cordova": {
         "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "XXXXXXXXXXXXXXXXXXXXXXXX",
        "API_KEY_FOR_IOS": "XXXXXXXXXXXXXXXXXXXXXXX",
        "PLAY_SERVICES_VERSION": "15.0.1",
        "ANDROID_SUPPORT_V4_VERSION": "26.1.0"
      }
 }

在 project.properties 中：

target=android-26
android.library.reference.1=CordovaLib
cordova.system.library.2=com.google.android.gms:play-services-auth:11.8.0
cordova.system.library.3=com.google.android.gms:play-services-identity:11.8.0
cordova.system.library.4=com.android.support:support-v4:24.1.1+
cordova.system.library.5=com.squareup.okhttp3:okhttp:3.+
cordova.system.library.6=com.google.android.gms:play-services-maps:15.0.1
cordova.system.library.7=com.google.android.gms:play-services-location:15.0.1
cordova.system.library.8=com.android.support:support-core-utils:26.1.0

之前运行的代码：

  ionViewDidLoad() {
    this.platform.ready().then(() => {
      let element = this.mapElement.nativeElement;
      let routePointBounds = new LatLngBounds(this.routePoints);

      let mapOptions: GoogleMapOptions = {
        camera: {
          target: routePointBounds.getCenter(),
          zoom: 20
        },
        controls: {
          compass: true,
          myLocationButton: true,
          myLocation: true,
          zoom: true,
          mapToolbar: true
        }
      };

      let restaurantMarkerOptions: MarkerOptions = {
        icon: {
          url: 'assets/imgs/logo.png',
          size: {
            width: 60,
            height: 70
          }
        },
        position: this.routePoints[this.routePoints.length - 1],
        animation: GoogleMapsAnimation.BOUNCE
      };

      this.map = GoogleMaps.create(element, mapOptions);

      this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
        this.map.addPolyline({
          points: this.routePoints,
          'color': '#ef0707',
          'width': 3,
          'geodesic': true
        }).then((polyline) => {
          this.map.animateCamera({
            target: routePointBounds,
            padding: 80
          });
          this.map.addMarker(restaurantMarkerOptions).then((marker: Marker) => {
            this.makeDistanceInfoWindow().open(marker);
          });
        });
      });
    });
  }

我想念什么吗？谁能指出我为什么突然出现白屏吗？

Google Map在Ionic 3应用程序中显示为白屏

0 个答案: