Geolocation API を使って JavaScript だけで位置情報を取得する

Cordova アプリで位置情報を取得する際は cordova-background-geolocation-lt というプラグインを使っていたのだけど、よくよく調べてみると Geolocation API というものがあり、最近のブラウザはどれもこの API を使って位置情報が取得できるらしい。というか、cordova-background-geolocation-lt はこの API 仕様に則ってデータを取得・返却しているっぽかった。

今更だけどお試し。

以下の GitHub Pages にサンプルを置いたので見てみてほしい。

Geolocation API

Geolocation API は、window.navigator.geolocation で提供されている。GPS 機能が使えるかどうかはこのオブジェクトの存在で判断できるだろう。

if(navigator.geolocation) {
  // Geolocation API が使える
}
else {
  // 使えない
}

位置情報をどうやって取得しているのか。仕組みは PC でもスマホでも基本的に同じで、IP アドレスや周辺の Wi-Fi 電波から推定していたりする。スマホは GPS 受信できるので、この情報も使われるのであろう。

ユーザの現在位置を取得する : getCurrentPosition

getCurrentPosition() を使うと、ユーザの位置情報が取得できる。

navigator.geolocation.getCurrentPosition(function(position) {
  console.log('緯度     : ' + position.coords.latitude);
  console.log('経度     : ' + position.coords.longitude);
  console.log('精度     : ' + position.coords.accuracy);
  console.log('移動速度 : ' + position.coords.speed);
});

第2引数に関数を渡すと、エラー時のハンドリングも可能。第3引数にオプションを渡すと位置情報の取得にかかる時間のタイムアウトを設定したりできる。

第1引数の関数で受け取れる Position オブジェクトは、位置情報を持つ Coordinates オブジェクトと timestamp プロパティを持つ。大抵は緯度・経度や移動速度などが知りたいものになるだろう。移動速度を示す speed プロパティは null の場合もあるので注意。その他のプロパティについては以下を参照。

位置情報を監視し続ける : watchPosition()

watchPosition() は、getCurrentPosition() の監視版といえる。位置情報が変化するたびにコールバック関数を実行する。

var watchID = navigator.geolocation.watchPosition(function(position) {
  console.log('緯度     : ' + position.coords.latitude);
  console.log('経度     : ' + position.coords.longitude);
  console.log('精度     : ' + position.coords.accuracy);
  console.log('移動速度 : ' + position.coords.speed);
});

引数などは getCurrentPosition() と同じなので、第2引数がエラー時に実行される関数、第3引数がオプション。位置移動をする度に、第1引数のコールバック関数が実行される。

getCurrentPosition() との違いは、この関数が watchID を返すこと。この数値を後述する clearWatch() に渡すことで、位置情報の監視を終了させることができる。

位置情報の監視を停止する : clearWatch()

clearWatch() は、watchPosition() で始めた位置情報の監視イベントを停止させる関数。

// 前述の watchPosition() から発行された watchID を指定して終了させる
navigator.geolocation.clearWatch( watchID );

ページ遷移などが絡んでしまうと監視の停止を行うタイミングが難しくなりそうだが、JavaScript だけでサクッと位置情報を取得したりできるので、色々な使い方ができそう。

参考