Geolocation API

連続して位置情報を取得する

var watchId = navigator.geolocation.watchPosition(
	successCallback,
	errorCallback,
	options
);

watchPosition()のプロセスを停止するためのメソッド

navigator.geolocation.clearWatch(watchId);

HTML source

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

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

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

	<dt>GPS 高度</dt>
	<dd id="altitude">-</dd>

	<dt>GPS 高度の精度</dt>
	<dd id="altitudeAccuracy">-</dd>

	<dt>移動方向</dt>
	<dd id="heading">-</dd>

	<dt>移動速度</dt>
	<dd id="speed">-</dd>

	<dt>タイムスタンプ</dt>
	<dd id="timestamp">-</dd>
</dl>

JavaScript source

document.addEventListener("DOMContentLoaded", function() {
	// オプション・パラメータをセット
	var position_options = {
		// 高精度を要求する
		enableHighAccuracy: true,
		// 最大待ち時間（ミリ秒）
		timeout: 60000,
		// キャッシュ有効期間（ミリ秒）
		maximumAge: 0
	};
	// 現在位置情報を取得
	navigator.geolocation.watchPosition(monitor, null, position_options);
}, false);

// 位置情報取得完了時の処理
function monitor(event) {
	// 緯度
	var latitude = event.coords.latitude;
	document.querySelector('#latitude').textContent = latitude;
	// 経度
	var longitude = event.coords.longitude;
	document.querySelector('#longitude').textContent = longitude;
	// 緯度・経度の精度
	var accuracy = event.coords.accuracy;
	document.querySelector('#accuracy').textContent = accuracy;
	// GPS 高度
	var altitude = event.coords.altitude;
	document.querySelector('#altitude').textContent = altitude;
	// GPS 高度の精度
	var altitudeAccuracy = event.coords.altitudeAccuracy;
	document.querySelector('#altitudeAccuracy').textContent = altitudeAccuracy;
	// 移動方向
	var heading = event.coords.heading;
	document.querySelector('#heading').textContent = heading;
	// 移動速度
	var speed = event.coords.speed;
	document.querySelector('#speed').textContent = speed;
	// タイムスタンプ
	var date = event.timestamp;
	if( typeof(date) == "number" ) {
		date = new Date(date);
	}
	document.querySelector('#timestamp').textContent = date.toString();
}

HTML source

<p><button type="button">開始</button></p>

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

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

JavaScript source

document.addEventListener("DOMContentLoaded", function() {
	// 監視識別ID
	var watch_id = 0;
	// ボタンにclickイベントのリスナーをセット
	var button = document.querySelector('button');
	button.addEventListener("click", function() {
		if( watch_id > 0 ) {
			// リアルタイム監視を停止
			navigator.geolocation.clearWatch(watch_id);
			// 監視識別IDに0をセット
			watch_id = 0;
			// ボタン表記を変更
			button.textContent = " 開始 ";
		} else {
			// リアルタイム監視を開始
			watch_id = navigator.geolocation.watchPosition(monitor);
			// ボタン表記を変更
			button.textContent = " 停止 ";
		}
	}, false);
}, false);

// リアルタイム監視
function monitor(event) {
	// 緯度
	var latitude = event.coords.latitude;
	document.querySelector('#latitude').textContent = latitude;
	// 経度
	var longitude = event.coords.longitude;
	document.querySelector('#longitude').textContent = longitude;
}