2
我是新来的离子2.我尝试练习Integrating Native Google Maps into an Ionic 2 Application,但是当我在Android设备上运行应用程序时,它会给出一个空白的谷歌地图,如下图所示。离子2空白谷歌地图
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!');
});
}
}
我没有改变任何其他页面。
我的谷歌开发者控制台API经理:
我不知道我错过了。
这意味着你没有从控制台启用api。请确保您已启用控制台以及设备上的位置 –
请不要公开您的api密钥。由于您正在获取所有地图控件,因此GoogleMaps正在成功地向您提供帮助。向你的离子内容添加一个班级,然后在你的scss中让班级背景和颜色变得透明。这个对我有用。 – AishApp
我添加了类但不适用于我。我是否应该更改index.html。 –