首先,我检查了所有现有的答案,但没有人工作,这就是我再次提出这个问题的原因。
import {
CameraPosition,
Geolocation,
GoogleMap,
GoogleMapsEvent,
GoogleMapsLatLng,
GoogleMapsMarker,
GoogleMapsMarkerOptions,
} from 'ionic-native';
import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';
declare var google;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('map') mapElement: ElementRef;
map: any;
public lat: any;
public long: any;
constructor(public navCtrl: NavController,
public Geolocation: Geolocation,
public platform: Platform
) {
this.platform.ready().then((ready) => {
console.log("ready");
this.loadMap();
//get user location
});
}
ionViewLoaded() {
this.loadMap();
}
loadMap() {
let im: any = '../../assets/icon/pointer18.png';
let latLng: any;
Geolocation.getCurrentPosition().then((position) => {
latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
var userMarker = new google.maps.Marker({
position: latLng,
map: this.map,
animation: google.maps.Animation.DROP,
icon: im
});
var x = document.querySelector('#map');
}, (err) => {
var x = document.querySelector('#map');
x.innerHTML = err;
console.log(err);
});
}
}
config.xml
<access origin="*"/>
<allow-navigation href="http://ionic.local/*"/>
<allow-navigation href="https://maps.googleapis.com/*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
<!-- Allow images, xhrs, etc. to google.com -->
<access origin="http://google.com" />
<access origin="https://google.com" />
<!-- Access to the subdomain maps.google.com -->
<access origin="http://maps.google.com" />
<!-- Access to all the subdomains on google.com -->
<access origin="http://*.google.com" />
<!-- Enable requests to content: URLs -->
<access origin="content:///*" />
androidmanifest.xml
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-feature android:name="android.hardware.location.gps" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
安装了cordova白名单地理位置和谷歌地图插件。 它在桌面浏览器中运行良好但在Android设备中没有,当我尝试离子运行android - 设备应用程序打开时,它要求允许地理定位并显示空白屏幕。还为map api生成了google密钥,并在andorid的script标签中提供了该密钥。 我很了解离子的任何帮助。