0から目指すWebマスター Web制作に関する備忘録
検索

JavaScript

Geolocation API

スマホやタブレットの普及で、現在地を取得するような位置サービスの需要が多くなるのは用意に想像がつく。
そこで、WebブラウザでJavaScriptを使って現在地の位置情報を取得する方法の備忘録。

HTML5 APIのひとつ、Geolocation 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
}

Geolocation APIのサンプル

基本は理解できたのだが、利用シーンによって、バッテリーの消費を抑えつつ、できるだけ正確な位置情報を取得できる手段はいろいろ検証の余地がありそう。
さらにはエラーのハンドリングをうまくしないと想定外の動きをしてしまう。。
まだ自分なりのベストが見つからず模索中!
奥が深いぜッ!