【簡単】JavaScriptで位置情報を取得する方法

HTML

JavaScriptで位置情報を扱いたいけど難しく考えていませんか?
本記事ではGeolocation APIを使用して簡単に位置情報を扱う方法をご紹介します。
コピペで使えるサンプルもあるので是非ご活用ください。

Geolocation API

位置情報は「navigator.geolocation」から取得することができます。
現在定義されているメソッドは3種類あります。

現在位置情報を取得するメソッド

位置情報を定期的に取得するメソッド

定期的な位置情報取得を停止するメソッド

取得できる位置情報

位置情報には下記の情報が含まれていますが、端末によって対応していないパラメータあるため取得できない場合もあります。

coords.latitude 緯度
coords.longitude 経度
coords.altitude 高度
coords.accuracy 精度
coords.altitudeAccuracy 高度の精度
coords.heading 方位
coords.speed 速度

現在位置情報を取得する方法

現在の位置情報を取得する場合は「getCurrentPosition」メソッドを使用します。
位置情報が利用可能であれば位置情報をオブジェクトで取得できます。

コードサンプル

結果

緯度:35.681236
経度:139.767125

定期的に位置情報を取得する方法

定期的に位置情報を取得する場合は「watchPosition」メソッドを使用します。
位置情報の変化などを取得したい場合はこのメソッドが便利です。

コードサンプル

結果

緯度:35.681236
経度:139.767125
緯度:35.681236
経度:139.767125
・・・

定期的な位置情報取得を停止する

定期的な位置情報取得を開始する場合に使用する「watchPosition」の戻り値を保持しておくことで、「clearWatch」メソッドを使用することで定期的な位置情報取得を停止することが可能です。

コードサンプル

タイトルとURLをコピーしました