HTML5 Geolocationの現在位置を取得するサンプル

HTML5のGeolocationの現在位置を取得するサンプルです。
JavaScriptを使用します。

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

コード

サンプルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>geolocationのサンプル</title>
<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")
			.innerHTML = "経度 : " + crd.latitude;
		document.getElementById("test2")
			.innerHTML = "緯度 : " + crd.longitude;
	};

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

} else {
    document.getElementById("test1").innerHTML
			= "このブラウザではGeolocationの使用はできません";
}
</script>
</head>
<body >
	<p id="test1"></p>
	<p id="test2"></p>
</body>
</html>

結果

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

 

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

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

関連の記事

HTML5 Canvas要素で三角形を表示するサンプル
HTML5 Canvas要素で長方形と円を表示するサンプル
HTML5 video要素で動画ファイルを再生するサンプル
HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)
HTML5 Web Storageのサンプル(Session StorageとLocal Storage)



△上に戻る