Web API 現在位置を取得する(getCurrentPosition)

目次

サンプル getCurrentPositionメソッド
  実行時の挙動

getCurrentPositionメソッド

navigator.geolocation.getCurrentPosition(success, error, options)
  • 現在位置の取得にはnavigatorオブジェクトの中のgeolocationオブジェクトのgetCurrentPositionメソッドを使用します。
  • 現在位置の取得に成功するとsuccessのコールバック関数が実行されます。
  • 現在位置の取得に失敗するとerrorのコールバック関数が実行されます。
  • optionsはオプションを指定します。
  • 以下はMDNのGeolocationのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation

 

サンプルのコードです。

<p id="test1"></p>
<p id="test2"></p>

<script>
// geolocationを利用できるか確認
if (navigator.geolocation) {

	//現在位置を取得する
	navigator.geolocation
		.getCurrentPosition(success,error,options); 

	var options = {
		// enableHighAccuracyは、GPSの精度でtrueかfalseをセットする
		// trueだと精度が高くなる
		enableHighAccuracy: true, 
		//timeoutは、タイムアウト時間でミリ秒単位
		timeout: 1000,
		// maximumAgeは、キャッシュ有効時間でミリ秒で表す
		// 0の場合、常に最新の情報を取得する
		maximumAge: 0
	};

	// 成功時
	function success(position) {
		var crd = position.coords;

		// Positionオブジェクトの中にあるcoordsオブジェクトの
		// latitudeとlongitudeプロパティを参照
		document.getElementById("test1")
			.textContent = "経度 : " + crd.latitude;
		document.getElementById("test2")
			.textContent = "緯度 : " + crd.longitude;
	};

	// 失敗時
	function error(err) {
		// PositionErrorオブジェクトの
		// codeとmessageプロパティを参照
		document.getElementById("test1").textContent 
			= "エラーコード : " + err.code;
		document.getElementById("test2").textContent 
			= "エラーメッセージ : " + err.message;
	};

} else {
    document.getElementById("test1").textContent
			= "このブラウザではGeolocationの使用はできません";
}
</script>

6行目は、実行環境で利用できるか確認しています。
9,10行目は、getCurrentPositionで現在位置を取得しています。
12-21行目は、オプションです。
24-33行目は、成功時に実行する関数です。
36-43行目は、失敗時に実行する関数です。

 

実行時の挙動

上記コードを実行するとブラウザが現在地の取得の許可を求めてきます。

 

「許可」を押すと、正常終了すれば経度と緯度が表示されます。

「ブロック」を押すと、以下のようにエラーコードとエラーメッセージが表示されます。

関連の記事

HTML 進捗状況を表示するプログレスバー
HTML 入力欄に入力候補を表示する(datalist)

△上に戻る