我是离子2的新手。我尝试练习Integrating Native Google Maps into an Ionic 2 Application,但是当我在Android设备上运行app时,它会给出一张空白的谷歌地图,如下图所示。
home.ts页面是:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div id="map"></div>
</ion-content>
home.scss是:
.scroll {
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
scroll-content._gmaps_cdv_{
background-color: transparent !important;
padding: 0px !important;
}
ion-app._gmaps_cdv_ .nav-decor{
background-color: transparent !important;
}
home-page {
}
home.ts是:
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;
constructor(public navCtrl: NavController, public platform: Platform) {
platform.ready().then(() => {
this.loadMap();
});
}
loadMap(){
let location = new GoogleMapsLatLng(-34.9290,138.6010);
this.map = new GoogleMap('map', {
'backgroundColor': 'white',
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
},
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true,
'zoom': true
},
'camera': {
'latLng': location,
'tilt': 30,
'zoom': 15,
'bearing': 50
}
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
console.log('Map is ready!');
});
}
}
我没有更改任何其他页面。
我的google开发者控制台API管理器是:
我不知道我错过了什么。
答案 0 :(得分:0)
我通过删除iOS和Android密钥限制来解决问题。