Ionic 2のジオロケーションがAndroidデバイスで機能しない

Question

Ionic 2で現在のジオロケーションを取得しようとしています。ブラウザではうまく動作しますが、私は、デバイス上で展開する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の実装をミックスしていることでした。イオンでは、それがイベントリスナーを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のおかげで私は正しい方向に考えることができました。