スマホやタブレットの普及で、現在地を取得するような位置サービスの需要が多くなるのは用意に想像がつく。
そこで、WebブラウザでJavaScriptを使って現在地の位置情報を取得する方法の備忘録。
HTML5 APIのひとつ、Geolocation API。これを使って現在地の位置情報を取得することができるようになる。
Geolocation API
本家の仕様（Geolocation API Specification）を自分なりに翻訳していきます。
まず、現在地を取得するには、
「一回のみ取得（getCurrentPosition）」か「ずっと取得し続ける（watchPosition）」か。
の2種類ある。
そして「ずっと取得し続ける場合、それを「解除する（clearWatch）」手段。
一回のみ取得（getCurrentPosition）
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, option);
セットできる引数は3つ。
- successCallback
- 取得成功した際に実行する関数
- errorCallback
- 取得に失敗した際に実行する関数
- option
- 取得方法をカスタマイズする際のオブジェクト
ずっと取得し続ける（watchPosition）
watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, option);
引数の扱いは「一回のみ取得（getCurrentPosition）」と同様。
解除する（clearWatch）
navigator.geolocation.clearWatch(watchId);
取得成功した際に返却される値（position）： 第1引数
| 取得時間 | position.timestamp |
|---|---|
| 緯度 | position.coords.latitude |
| 緯度 | position.coords.longitude |
| 高度 | position.coords.altitude |
| 緯度・経度の誤差 | position.coords.accuracy |
| 高度の誤差 | position.coords.altitudeAccuracy |
| 方角 | position.coords.heading |
| 速度 | position.coords.speed |
取得に失敗した際に返却される値（error.code）： 第2引数
| 1 | PERMISSION_DENIED | position.timestamp |
|---|---|---|
| 2 | POSITION_UNAVAILABLE | position.coords.latitude |
| 3 | TIMEOUT | position.coords.longitude |
error.messageで、エラーメッセージを取得できる（英文）。
取得方法をカスタマイズする際のオブジェクト： 第3引数
| enableHighAccuracy | 精度重視はtrueをセット。ただしバッテリーの減りはfalseより早い。 |
|---|---|
| timeout | 一回の取得時間（ミリ秒で指定） |
| maximumAge | キャッシュ（ミリ秒で指定） |
/* デフォルト（指定なしの場合） */
{
enableHighAccuracy: false,
timeout: Infinity,
maximumAge: 0
}
/* キャッシュ：10分間以内に取得した情報があればそれを採用する。なければ新規取得。 */
{
maximumAge: 600000
}
/* 10分間以内に取得した情報があればそれを採用する。なければエラー。 */
{
maximumAge: 600000,
timeout: 0
}
/* 取得した情報があればそれを採用する。なければエラー。 */
{
maximumAge: Infinity,
timeout: 0
}
基本は理解できたのだが、利用シーンによって、バッテリーの消費を抑えつつ、できるだけ正確な位置情報を取得できる手段はいろいろ検証の余地がありそう。
さらにはエラーのハンドリングをうまくしないと想定外の動きをしてしまう。。
まだ自分なりのベストが見つからず模索中！
奥が深いぜッ！