我试图显示地图,但我得到的只是一个底部带有谷歌徽标的灰色框。我查看了该网站上的其他帖子,并尝试了所有这些帖子,但似乎都没有解决该问题。
我正在使用 ionic 3.12.0 和 cordova 插件 googlemaps 2.0.7
我已确保 API 密钥正确并在仪表板中启用。
我尝试过使用教程https://ionicframework.com/docs/native/google-maps/ 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;
}