Androidアプリで端末の位置情報を取得する

11226 ワード
Cordova Android 位置情報 JavaScript JavaScript テキストリンク

#はじめに
Androidアプリで、Cordovaプラグインを使用して端末の位置情報を取得する。

#コード
最終的なコード

document.addEventListener("deviceready", function(){

  let permissions = window.cordova.plugins.permissions;
  permissions.requestPermissions(
    [
      permissions.ACCESS_FINE_LOCATION
      ,permissions.ACCESS_COARSE_LOCATION
    ]
    ,function( status ){
      if( status.hasPermission ){
        navigator.geolocation.getCurrentPosition(
          function(position) {
            let latitude = position.coords.latitude
            let longitude = position.coords.longitude
            console.log(latitude, longitude)
          },
          function(error) {
            console.log(error)
          },
          {
            enableHighAccuracy: false,
            timeout: 30000,
          }
        );
      }
      else{
        console.log('status of permissions is error')
      }
    }
    ,function(){
       console.log('permissions is error')
    }
  );

}, false);

#解説
###Cordovaの読み込みが完了した後で、中の関数を実行する。
https://cordova.apache.org/docs/ja/latest/cordova/events/events.deviceready.html

document.addEventListener("deviceready", function(){
  ....
}, false);

###端末で位置情報取得を許可する。
アプリを開いた時に、「~~~に位置情報へのアクセスを許可しますか」という旨の確認ダイアログを表示させる。
cordova-plugin-android-permissionsをインストール。

cd src-cordova
cordova plugin add cordova-plugin-android-permissions

複数のパーミッションをリクエストするため、permissions.requestPermissionsを使用。
permissions.ACCESS_FINE_LOCATIONは、おおよその位置にアクセスできるようにする設定。
permissions.ACCESS_COARSE_LOCATIONは、正確な場所にアクセスできるようにする設定。


let permissions = window.cordova.plugins.permissions;

permissions.requestPermissions(
  [
    permissions.ACCESS_FINE_LOCATION
    ,permissions.ACCESS_COARSE_LOCATION
  ]
  ,function( status ){
    if( status.hasPermission ){
      ....
    }
    else{
      ....
    }
  }
  ,function(){
    ....
  }
);

app/AndroidManifest.xmlに下記を追加する。

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

###geolocationプラグインをインストール。

cordova plugin add cordova-plugin-geolocation

// 古いバージョンのCordovaはこっちをインストール（5.0未満？）
cordova plugin add org.apache.cordova.geolocation

app/res/xml/config.xmlに下記を設定する。

<feature name="Geolocation">
    <param name="android-package" value="org.apache.cordova.GeoBroker" />
</feature>

###位置情報を取得する。
navigator.geolocation.getCurrentPositionを使う。

navigator.geolocation.getCurrentPosition(
  function(position) {
    let latitude = position.coords.latitude
    let longitude = position.coords.longitude
    console.log(latitude, longitude)
  },
  function(error) {
    console.log(error)
  },
  {
    enableHighAccuracy: false,
    timeout: 30000,
  }
);

enableHighAccuracyはより正確な位置情報を取得するためのオプション。
通常はtrueで設定するが、アプリの起動が遅くなる場合はfalseにすると早くなる。
falseでもほぼ正確な位置情報を取得できる。

#参考サイト
https://www.npmjs.com/package/cordova-plugin-android-permissions