位置情報を取り出すサンプル 4

　enableHighAccuracy プロパティに true をセットし、位置情報の精度を上げています。


<!DOCTYPE html>

<html lang="ja">
<head>
	<meta charset="UTF-8">

	<title>位置情報を取り出すサンプル4 - Yugien</title>

<script>
<!--
document.addEventListener("DOMContentLoaded", function() {
	// オプション・パラメータをセット
	var position_options = {
		enableHighAccuracy: true   // 高精度を要求する
	};
	// 現在位置情報を取得
	window.navigator.geolocation.getCurrentPosition(
		show_location,    // 位置情報取得完了時に実行されるコールバック
		show_error,       // 位置情報取得失敗時に実行されるコールバック
		position_options  // オプション・パラメータ
	);
}, false);

// 位置情報取得完了時の処理
function show_location(event) {
	// 緯度
	var latitude = event.coords.latitude;
	document.querySelector('#latitude').textContent = latitude;
	// 経度
	var longitude = event.coords.longitude;
	document.querySelector('#longitude').textContent = longitude;
}

// 位置情報取得失敗時の処理
function show_error(event) {
	alert( event.message + "(" + event.code + ")" );
}
//-->
</script>
</head>

<body>

<h1>Geolocation API</h1>

<h2>位置情報を取り出すサンプル 4</h2>

<dl>
	<dt>緯度</dt>
	<dd id="latitude">-</dd>

	<dt>経度</dt>
	<dd id="longitude">-</dd>

	<dt>緯度・経度の精度</dt>
	<dd id="accuracy">-</dd>
</dl>

</body>
</html>

Geolocation API

位置情報を取り出すサンプル 4

Explanation

Sample source for this page