2019/07/05

1. 2019/07/05
JavaScriptで位置情報を
取得してみた
執筆者：トビウオ

2. 位置情報って？
✤ 緯度・経度・高度などといった情報のこと
✤ 取得するには適切なパーミッションが必要なことも
✤ なにげにJavaScriptからも取得できるらしい

3. 取得方法
✤ getCurrentPosition関数に、
成功時・失敗時のコールバ
ック関数と、実行オプショ
ンを設定する
✤ 成功時は緯度・経度などの
情報が手に入る(後述)
✤ オプションにはタイムアウ
ト時間などを設定する(後述)
サンプルソース(MDNより引用)

4. 取得できる情報
✤ success関数の第一引数に、Position型(インターフェース)で渡される
プロパティ 意味 単位
coords.latitude 緯度(WGS84) 度数(北緯)
coords.longitude 経度(WGS84) 度数(東経)
coords.altitude 高度 m
coords.accuracy 緯度/経度の精度 m
coords.altitudeAccuracy 高度の精度 m
coords.heading デバイスの移動方向 度数(北だと0°)
coords.speed デバイスの速度 m/s

5. 取得できる情報(補足)
✤ データを取得できない場合、緯度・経度・位置の精度はNaN、それ以外
はnullが返ってくる
✤ デバイスの速度は水平成分におけるものである。また、速度が0である場
合、デバイスの移動方向はNaNを返す
✤ 緯度・経度・高度における「精度」は、「95％信頼区間であるべき」と
規格に書かれている
✤ デバイスの移動方向は、北→東→南→西で0°・90°・180°・270°とする

6. 取得時のオプション
✤ enableHighAccuracy……trueにすると、より精度の高い位置情報(大抵は
GPS)を取得するようになる
✤ timeout……タイムアウト時間(ms単位)。0にするとエラー時にコールバッ
クが返らないようになる
✤ maximumAge……返す位置情報はキャッシュされるが、その寿命を指定
する(ms単位)。0にすると毎回最新の情報を返させる

7. さあ早速試してみ……
✤ ローカル環境だと、PCブラウザで実行したら取得さ
れるがスマホで(PCに)アクセスすると取得されない！
✤ MDN「あっそれHTTPSでしか使えないんですよ」
✤ HTTPSサーバーを立てないとテストできないorz

8. 取得サンプル
スマホの例PCの例

9. 参考資料
✤ Geolocation.getCurrentPosition() - Web API | MDN
✤ Position - Web API | MDN
✤ Coordinates - Web API | MDN
✤ Geolocation API Specification