谷歌地图带有离子3的原生cordova插件只显示一个灰色框

问题描述：

我试图获得一个地图显示，我得到的所有东西都是一个灰色的框，其底部有谷歌徽标。我查看了本网站上的其他帖子，并尝试了所有这些帖子，但他们都没有解决这个问题。我使用离子3.12.0与科尔多瓦插件谷歌地图2.0.7 我已经确保API密钥是正确的，并在仪表板中启用。谷歌地图带有离子3的原生cordova插件只显示一个灰色框

我使用教程下方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; 
}

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md – wf9a5m75

答

我有同样的问题，

这个工作为了我。

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

重新添加插件使用不同的API密钥重新加入平台

这并没有为我工作！ –

答

可能有各种原因。

谷歌地图Android API（或Google Maps SDK for iOS）应该在您的谷歌云端控制台中启用。

检查您的Google API密钥的有效性和限制。

使用来自@ angular/core而不是HTMLElement的ElementRef。

试试这个：https://codeburst.io/native-google-maps-and-geolocation-ionic-fe635a00249d

谷歌地图带有离子3的原生cordova插件只显示一个灰色框

相关推荐