Javascriptで位置情報を取得する

Javascriptで端末の位置情報を取得する方法を調べたのでまとめておく。参考にしたのはGeolocation の利用。

位置情報を取得するにはGeolocation APIのgetCurrentPosition() かwatchPosition() メソッドを使う。前者は1回のみ情報取得を行い、後者は一定間隔で情報を取得し続ける。ともに引数として、成功時のコールバック、エラー時のコールバック（省略可）、PositionOptions オブジェクト（省略可）をとる。

成功時のコールバック関数

位置情報と取得時の時間が得られる。取得できる情報は緯度や経度などで、詳細はCoordinatesを参照。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function geo_success(position) {   // 位置情報を取得した時刻   var timestamp = new Date(position.timestamp);   // 緯度   var latitude  = position.coords.latitude;   // 経度   var longitude = position.coords.longitude;   // 緯度・経度の誤差   var accuracy = position.coords.accuracy;   // 高度   var altitude = position.coords.altitude;   // 高度の誤差   var altitudeAccuracy = position.coords.altitudeAccuracy;   // 移動方向   var heading = position.coords.heading;   // 移動速度   var speed = position.coords.speed; }

エラー時のコールバック

エラーコードは3種類ある。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function geo_error(error) {   switch(error.code)   {     case 1:       // PERMISSION_DENIED       output.innerHTML = 'このページにはアクセス許可がないため、位置情報の取得に失敗しました。';       break;     case 2:       // POSITION_UNAVAILABLE       output.innerHTML = '少なくともひとつの位置情報ソースが内部的なエラーを返したため、位置情報の取得に失敗しました。';       break;     case 3:       // TIMEOUT       output.innerHTML = 'PositionOptions.timeout によって指定された制限時間内に位置情報を取得することができませんでした。';       break; }

オプション

オプションは３つ。オプションについてはPositionOptions。

1 2 3 4 5 6 7 8

var geo_options = {   // trueのときに高精度な位置情報を提供できる場合に利用する   enableHighAccuracy: true,   // キャッシュ済みの位置情報の有効期限 (ミリ秒)   maximumAge        : 30000,   // 位置情報の取得にかかる時間の上限 (ミリ秒)   timeout           : 10000 };

コードを書いてみる

Geolocation APIで位置情報を取得するJavascriptコード書いてみる。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

function geo_success(position) {   // 位置情報を取得した時刻   var timestamp = new Date(position.timestamp);   // 緯度   var latitude  = position.coords.latitude;   // 経度   var longitude = position.coords.longitude;   // 緯度・経度の誤差   var accuracy = position.coords.accuracy;   // 高度   var altitude = position.coords.altitude;   // 高度の誤差   var altitudeAccuracy = position.coords.altitudeAccuracy;   // 移動方向   var heading = position.coords.heading;   // 移動速度   var speed = position.coords.speed;   };   function geo_error(error) {   switch(error.code)   {     case 1:       // PERMISSION_DENIED       output.innerHTML = 'このページにはアクセス許可がないため、位置情報の取得に失敗しました。';       break;     case 2:       // POSITION_UNAVAILABLE       output.innerHTML = '少なくともひとつの位置情報ソースが内部的なエラーを返したため、位置情報の取得に失敗しました。';       break;     case 3:       // TIMEOUT       output.innerHTML = 'PositionOptions.timeout によって指定された制限時間内に位置情報を取得することができませんでした。';       break;   } };   var geo_options = {   // trueのときに高精度な位置情報を提供できる場合に利用する   enableHighAccuracy: true,   // キャッシュ済みの位置情報の有効期限 (ミリ秒)   maximumAge        : 30000,   // 位置情報の取得にかかる時間の上限 (ミリ秒)   timeout           : 10000 };   // Geolocation APIが使用できるかの確認 if (!navigator.geolocation){   alert('お使いのブラウザではGeolocationがサポートされていません'); } else  {   //var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);   var wpid = navigator.geolocation.getCurrentPosition(geo_success, geo_error, geo_options); }

仕様では取得できない情報にはnullが入るとあるが、Firefoxではaltitude（高度）に0が入ったり、heading（移動方向）にNaNが入ったりする。Chromeだとちゃんとnullが入る。それでも、緯度、経度情報はとれているので、Three.jsと合わせたらポケモンGOみたいなゲームが作れそう。