【JavaScript】位置情報の取得（Geolocation API）
JavaScript
2021/05/25
Geolocation API とは
Geolocation API は、ブラウザから現在位置を取得するための仕組みです。 以下が実際にブラウザから取得した情報になります。 位置情報の取得を許可していない場合は表示されません。
ブラウザの対応状況についてはこちらで確認してください。 JavaScript 上では、以下で対応しているかの判断ができます。
if (!navigator.geolocation) {
//対応していない場合の処理
}現在位置の取得
現在位置を取得するには、getCurrentPosition()を使用します。
navigator.geolocation.getCurrentPosition(
(position) => {
//成功時のコールバック関数
},
(error) => {
//失敗時のコールバック関数
},
options
)getCurrentPosition()は非同期に処理され、第 1、2 引数にそれぞれ成功時と失敗時のコールバック関数を設定します。
成功時は、コールバック関数の引数として位置情報を持つオブジェクトを得ます。
オブジェクトは以下の情報を持ちます。
デバイスや条件によって取得できないデータもあります。
その場合はnullが設定されます。
| プロパティ | 説明 |
|---|---|
coords.latitude | 緯度 |
coords.longitude | 経度 |
coords.altitude | 高度 |
coords.accuracy | 緯度、経度の精度（メートル） |
coords.altitudeAccuracy | 高度の精度（メートル） |
coords.heading | 方角（北: 0, 東: 90, 南: 180, 西: 270） |
coords.speed | 速度 |
timestamp | 取得時間に基づくタイムスタンプ |
失敗時には、以下のエラー情報を引数によって参照できます。
| プロパティ | 説明 |
|---|---|
code | エラーコード 1: ユーザーの許可なし 2: 内部エラー 3:タイムアウト |
message | エラーメッセージ |
第 3 引数には、以下のオプションオブジェクトを設定します。
| プロパティ | デフォルト値 | 説明 |
|---|---|---|
enableHighAccuracy | false | trueとすることで位置情報の精度を上げるデバイス負荷が上がり、消費電力の増加や計測に時間がかかる |
timeout | infinity | 処理のタイムアウト（ミリ秒） |
maximumAge | 0 | キャッシュの有効期限（ミリ秒） |
Promise 化
getCurrentPosition()は非同期処理のため、Promiseを利用することをオススメします。
Promiseについては、こちらの記事を参考にしてください。
Promise化
const getCurrentPosition = (options) => {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject, options)
})
}使用例
const position = getCurrentPosition(options).catch(err => {
alert('error');
})