[JavaScript]位置情報を取得する

JavaScript

JavaScriptを使用して位置情報を取得するというものを勉強してみました。

JavaScriptを使用して緯度・経度を取得。その情報を使用して住所を取得してみたいと思います。

位置情報の取得

Geolocation API というものを使用して位置情報を取得します。

Geolocation API – Web API | MDN

本機能を使用するには対応しているWEBブラウザを使用してhttps通信で行う必要があります。

対応ブラウザ情報は以下を参照してください。

ブラウザーの対応 | Geolocation API – Web API | MDN

Chrome・FireFoxでは問題なさそうですね。

navigator.geolocationを使用して情報を取得します。

このオブジェクトが存在していれば取得可能ですので、まずは以下のように記載します。

if ("geolocation" in navigator) {
  /* 利用可能な場合の処理を記入 */
} else {
  /* ブラウザが対応していない場合のエラーメッセージを記載 */
}

現在位置情報を取得するにはgetCurrentPosition()メソッドを使用します。

このメソッドには3つのオプションを指定できます。※第一オプションのみ必須

getCurrentPosition(Success, Error, Options)
  • Success – 取得に成功した場合の処理
  • Error – 取得に失敗した場合の処理
  • Options – 取得に関するオプション

取得に関するオプションには以下を指定できます

  • enableHighAccuracy – FALSE|TRUE TRUEを指定すると精度の高い情報を取得しようとします。
  • timeout – 整数 (ミリ秒) – エラーコールバックが呼び出されるまでの時間で、 0 の場合は呼び出されません
  • maximumAge – 整数 (ミリ秒) | infinity – キャッシュされた位置の最大寿命です。

取得に成功するとcoordsという名称でオブジェクトを受け取ります。

とりあえず、getCurrentPositionに3つのオプションをざっくりと指定し、どのような値をcoordsで受け取れるかを確認してみましょう。

//オプションの指定
var options = {
enableHighAccuracy: true,
timeout: 3000,
maximumAge: 0
};

//成功した場合の処理
function success(pos) {
console.log(pos.coords);
}

//失敗した場合の処理

function success(err) {
console.log('エラーです');
}
navigator.geolocation.getCurrentPosition(success, error, options);

coordsには以下の項目が含まれていました。

accuracy緯度・経度の精度を表します。
altitude高度をメートル単位で表示します。
altitudeAccuracy高度の制度を表示します。
headingデバイスの移動方向を真北から何度離れているかで表します。
latitude緯度を表示します。
longitude経度を表示します。
speed移動速度をメートル毎秒で表示します。

取得した値を使用して色々なことができそうですので後日改めて記事を追加します。

JavaScript