google-maps - 带有 Ionic 3 的 Google Maps Native cordova 插件只显示一个灰色框

Question

我正在尝试显示 map ，但我得到的只是一个底部带有谷歌 Logo 的灰色框。我查看了该网站上的其他帖子，并尝试了所有帖子，但似乎没有一个能解决问题。我正在使用 ionic 3.12.0 和 cordova 插件 googlemaps 2.0.7我已确保 API key 正确并在仪表板中启用。

我试过使用教程 https://ionicframework.com/docs/native/google-maps/下面是代码

import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 GoogleMapOptions,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';


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

@Component({
  selector: 'map',
  template: '<div #map id="map"></div>'
})
export class Map {

  map: GoogleMap;
  mapElement: HTMLElement;
  constructor(private googleMaps: GoogleMaps) { }

  setMapLocation(coords: any) {
    this.map.setCameraTarget(coords);
  }

  ionViewDidLoad() {
   this.loadMap();
  }

  loadMap() {
  this.mapElement = document.getElementById('map');

  let mapOptions: GoogleMapOptions = {
    camera: {
      target: {
        lat: 43.0741904,
        lng: -89.3809802
      },
      zoom: 18,
      tilt: 30
    }
  };

  this.map = this.googleMaps.create(this.mapElement, mapOptions);

  // Wait the MAP_READY before using any methods.
  this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      console.log('Map is ready!');

      // Now you can use all methods safely.
      this.map.addMarker({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: {
            lat: 43.0741904,
            lng: -89.3809802
          }
        })
        .then(marker => {
          marker.on(GoogleMapsEvent.MARKER_CLICK)
            .subscribe(() => {
              alert('clicked');
            });
        });

    });
}}

我添加的CSS是

#map {
    width: 100% !important;
    height: 100% !important;
    img{ max-width: none !important; }
    overflow:visible !important;
    z-index: 1;
}

ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

Answer 1

我遇到了同样的问题，

这对我有用。

删除谷歌地图插件删除平台

使用不同的 API Key 重新添加插件重新添加平台