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

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

Geolocation API

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

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

void getCurrentPosition(PositionCallback successCallback,
                        optional PositionErrorCallback errorCallback,
                        optional PositionOptions options);

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

long watchPosition(PositionCallback successCallback,
                    optional PositionErrorCallback errorCallback,
                    optional PositionOptions options);

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

void clearWatch(long watchId);

取得できる位置情報

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

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

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

コードサンプル

function success(position) {
	console.log("緯度:" + position.coords.latitude);
	console.log("経度:" + position.coords.longitude);
}
function error() {
    document.write("位置情報の取得に失敗しました。");
}
navigator.geolocation.getCurrentPosition(success, error);

結果

緯度:35.681236
経度:139.767125

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

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

コードサンプル

function success(position) {
	console.log("緯度:" + position.coords.latitude);
	console.log("経度:" + position.coords.longitude);
}
function error() {
    document.write("位置情報の取得に失敗しました。");
}
var watchId = navigator.geolocation.watchPosition(success, error);

結果

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

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

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

コードサンプル

navigator.geolocation.clearWatch(watchId);