Ionic 2 地理位置在 Android 设备上不起作用

Question

我正在尝试在 Ionic 2 中获取当前地理位置以在 Android 设备上工作。在浏览器中它运行良好，但是当我运行ionic cordova run android命令在设备上部署时，地理位置根本不执行，并且出现以下错误：

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. main.js:48746 
Native: deviceready did not fire within 2000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them. cordova.js:1223 (anonymous) @ main.js:48746
deviceready has not fired after 5 seconds. main.js:48741 
DEVICE READY FIRED AFTER 3656 ms main.js:119892 
Ionic Native: deviceready event fired after 3519 ms main.js:122839 
Ionic Storage driver: asyncStorage main.js:50230 
navigator.geolocation works well main.js:8291 
PlacesPage ionViewDidLoad error: this.getGeolocation is not a function

主要是，我不明白的是我得到了this.getGeolocation is not a function，因为从浏览器到设备是如何变化的？

import { Geolocation } from '@ionic-native/geolocation';
...
constructor(private geolocation: Geolocation) {}
...
ionViewDidLoad() {
if(this.platform.is('cordova') === true){
document.addEventListener("deviceready", onDeviceReady, false);
}else{
console.log('Browser geolocation')
this.getGeolocation();
}
function onDeviceReady() {
console.log("navigator.geolocation works well");
this.getGeolocation();
}
}
getGeolocation(){
console.log('Starting Geolocation');
var options = {
enableHighAccuracy: true
};
this.geolocation.getCurrentPosition(options)
.then((position) => {
console.log('Geolocation successful');
this.currentLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
let query = '?lat=' + position.coords.latitude + '&lng=' + position.coords.longitude;
this.updatePlaces(query);
}).catch((error) => {
console.log('Error getting location', error);
});
}

我尝试删除所有插件并重新安装它们。我已将内容安全策略添加到索引.html。

谁能告诉我出了什么问题或引导我朝着正确的方向前进？谢谢。

Answer 1

你的代码对我来说似乎不正确。将您的代码更改为以下内容：

import { Geolocation } from '@ionic-native/geolocation';
...
constructor(private geolocation: Geolocation) {}
...
ionViewDidLoad() {
if(this.platform.is('cordova') === true){
document.addEventListener("deviceready", onDeviceReady, false);
}else{
console.log('Browser geolocation')
this.getGeolocation();
}
}
function onDeviceReady() {
console.log("navigator.geolocation works well");
this.getGeolocation();
}
getGeolocation(){
console.log('Starting Geolocation');
var options = {
enableHighAccuracy: true
};
this.geolocation.getCurrentPosition(options)
.then((position) => {
console.log('Geolocation successful');
this.currentLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
let query = '?lat=' + position.coords.latitude + '&lng=' + position.coords.longitude;
this.updatePlaces(query);
}).catch((error) => {
console.log('Error getting location', error);
});
}

Answer 2

我似乎已经解决了这个问题。问题是我一直在混合Cordova的地理位置的实现和Ionic的实现。在 Ionic 中，不需要添加事件侦听器(我想它在后台处理它(，如文档所示，因此正确的实现应该是这样的：

import { Geolocation } from '@ionic-native/geolocation';
...
constructor(private geolocation: Geolocation) {}
...
ionViewDidLoad() {
this.getGeolocation();
}
getGeolocation(){
console.log('Starting Geolocation');
var options = {
enableHighAccuracy: true
};
this.geolocation.getCurrentPosition(options)
.then((position) => {
console.log('Geolocation successful');
this.currentLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
let query = '?lat=' + position.coords.latitude + '&lng=' + position.coords.longitude;
this.updatePlaces(query);
}).catch((error) => {
console.log('Error getting location', error);
});
}

在实现事件侦听器之前，我已经有了这段代码，但是当时插件失败了，所以这是试图解决这个问题，它必须实现事件侦听器。感谢蒂瓦里@Prerak让我朝着正确的方向思考。