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);
    });
}

我已尝试删除所有插件并重新安装它们。我在 index.html 中添加了 Content-Security-Policy。

谁能告诉我哪里出了问题或指导我正确的方向？谢谢。

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 中，不需要添加事件监听器（我猜它会在后台处理）as seen in the docs，所以正确的实现应该是这样的：

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);
    });
}

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