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

開始ボタンを押すとリアルタイム監視を開始し、もう一度、停止ボタンを押すとリアルタイム監視を停止します。


<!DOCTYPE html>

<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>位置情報を取り出すサンプル 8</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
	// 監視識別ID
	var watch_id = 0;
	// ボタンにclickイベントのリスナーをセット
	var button = document.querySelector('button');
	button.addEventListener("click", function() {
		if( watch_id > 0 ) {
			// リアルタイム監視を停止
			window.navigator.geolocation.clearWatch(watch_id);
			// 監視識別IDに0をセット
			watch_id = 0;
			// ボタン表記を変更
			button.textContent = " 位置情報の取得開始 ";
		} else {
			// リアルタイム監視を開始
			watch_id = window.navigator.geolocation.watchPosition(successCallback);
			// ボタン表記を変更
			button.textContent = " 位置情報の取得停止 ";
		};
	}, false);
}, false);

// リアルタイム監視
function successCallback(position) {
	// コンソールログは増え続けてしまうのでコメントアウト
	// console.log(position);
	// 緯度
	var glLatitude = position.coords.latitude;
	document.querySelector('#latitude').textContent = glLatitude;
	// 経度
	var glLongitude = position.coords.longitude;
	document.querySelector('#longitude').textContent = glLongitude;
};
</script>
</head>

<body>

<h1>Geolocation API</h1>

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

<p><button type="button"> 位置情報の取得開始 </button></p>

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

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

</body>
</html>

Geolocation API

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

Explanation

Sample source for this page