[英]how to add google maps to android
i want to show map on my app.我想在我的应用程序上显示 map。 i create it with ionic, when i run with
ionic cordova run browser
it was showing like what i want, like this.我用离子创建它,当我用
ionic cordova run browser
运行时,它显示的就像我想要的那样,就像这样。
but when i try to run it from real device android ionic cordova run android
it show me white screen with google logo, like screenshow bellow.但是当我尝试从真实设备 android
ionic cordova run android
它时,它向我显示带有谷歌徽标的白屏,如下面的屏幕显示。
here my code: on .ts
file.这是我的代码:在
.ts
文件上。
export class AddAccountPage implements OnInit {
modalTitle:string;
modelId:number;
@ViewChild('map') element: ElementRef;
map: GoogleMap;
constructor(private modalController: ModalController, public plt: Platform, public nav: NavController) { }
ngOnInit() {
}
ionViewDidEnter() {
this.plt.ready().then(() => {
this.initMap();
});
}
initMap() {
// This code is necessary for browser
Environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': 'key',
'API_KEY_FOR_BROWSER_DEBUG': 'key'
});
this.map = GoogleMaps.create(this.element.nativeElement);
this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
let position = {
target: coordinates,
zoom: 17
};
this.map.animateCamera(position);
let markerOptions: MarkerOptions = {
position: coordinates
};
const marker = this.map.addMarker(markerOptions)
.then((marker: Marker) => {
marker.showInfoWindow();
});
})
}
}
on .html
file在
.html
文件上
<ion-content fullscreen>
<div #map style="height:100%;"></div>
</ion-content>
and finally on config.xml
.最后在
config.xml
上。
for the api
im using random string, not real api
, cause i dont have it.对于
api
我使用随机字符串,而不是真正的api
,因为我没有它。
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />
Try blow Example:尝试打击示例:
Install Plugin for Current Location: https://ionicframework.com/docs/native/geolocation为当前位置安装插件: https://ionicframework.com/docs/native/geolocation
In your index.html add api key在你的 index.html 添加 api 键
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
In your HTML:在您的 HTML 中:
<ion-content>
<div #map id="map"></div>
</ion-content>
In your CSS:在您的 CSS 中:
#map {
width: 100%;
height: 100vh;
}
In your.ts在你的.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
declare var google;
export class HomePage {
@ViewChild('map', {static: false}) mapElement: ElementRef;
map: any;
constructor(
private geolocation: Geolocation
) {}
ngOnInit() {
this.loadMap();
}
loadMap() {
let that = this;
this.geolocation.getCurrentPosition().then((resp) => {
let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}).catch((error) => {
console.log('Error getting location', error);
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.