読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

JavaScript で位置情報を取得してみる

API JavaScript jQuery HTML5

JavaScript で位置情報を取得してみる

JavaScript の位置情報取得API geolocation を使ってみたのでメモ。

サンプル

PC からも試せますが、モバイル端末ではリアルタイムで位置の違いを見ることができます。

http://cartman0.github.io/geolocationTest/

コード

geolocation API のテスト

geolocation について

geolocation に対応しているかチェック

          

if (!navigator.geolocation){
 // geolocationに対応していないときの処理
}else{
 //正常の処理
}

位置情報を取得するのにgeolocation では2種類の関数がある。

getCurrentPosition

1回だけ位置情報を取得。

navigator.geolocation.getCurrentPosition(success(position), error(e), option);

watchPosition

継続して取得できる。しかし、モバイル端末ではバッテリーの減りが早いので注意が必要。

navigator.geolocation.watchPosition(success(position), error(e), option);

成功時に取得できる値

それぞれの第1引数のコールバック関数(成功時に行われる関数)のオブジェクトに格納される。


function success(position) {
 var time = position.timestamp;                 //タイムスタンプ
 var lat = position.coords.latitude;            //緯度
 var lon = position.coords.longitude;           //経度
 var alt = position.coords.altitude;            //高度
 var acc = position.coords.accuracy;            //正確性
 var alt_acc = position.coords.altitudeAccuracy;//高度の正確性
 var heading = position.coords.heading;         //方位
 var speed = position.coords.speed;             //速度
}

プロパティ単位・最大最小値
timestamp タイムスタンプ  
coords.latitude 緯度 [degree] (-90 ~ 90)
coords.longitude 経度 [degree] (-180 ~ 180)
coords.altitude 高度 [m]
coords.accuracy 正確性(緯度・経度の誤差) [m]
coords.altitudeAccuracy 高度の正確性(誤差) [m]
coords.heading 方位 [degree] (0~360)
coords.speed 速度 [m/s]

失敗時

同様に、失敗時にはerror オブジェクトが返される(第2引数のコールバック関数)。

          

// 位置情報の取得に失敗した場合の処理
function err(error){
 var e = "";
 if (error.code == 1) { //1=位置情報取得が許可されてない(ブラウザの設定)
  e = "位置情報が許可されてません";
 }
 if (error.code == 2) { //2=現在地を特定できない
  e = "現在位置を特定できません";
 }
 if (error.code == 3) { //3=位置情報を取得する前にタイムアウトになった場合
  e = "位置情報を取得する前にタイムアウトになりました";
 }
}

プロパティ説明
error.code 1 位置情報の取得が許可されていない
error.code 2 位置情報の取得が利用できない
error.code 3 タイムアウト
eroor.message   エラーメッセージ

オプション

第3引数にオプションを設定できる。


var option = {
 enableHighAccuracy: true, // より高精度な位置を求める
 maximumAge: 1,         // 最後の現在地情報取得が [maximuAge][ms]以内であればその情報を再利用する設定
 timeout: 10000          // timeout[ms]以内に現在地情報を取得できなければ、処理を終了
};

プロパティ説明
option.enableHighAccuracy より高い正確性を求める(取得時間が遅くなる)。モバイル端末ではGPSを使用する(バッテリー消費が激しい)。
option.maximumAge 位置情報の有効期限(キャッシュ)。最後の現在地情報取得が [maximuAge][ms]以内であればその情報を再利用する
option.timeout タイムアウトまでの時間。timeout[ms]以内に現在地情報を取得できなければ、処理を終了する。