Geolocation APIを利用する(2/4):JavaScriptによるHTML5プログラミング入門

Geolocation APIを利用する (2/4)

作成:2011-10-17 09:36
更新:2011-10-17 09:43

■定期的に情報を更新するには？

続いて、「定期的にGPS情報を取得する」という方法についてです。これは、getCurrentPositionメソッドの代わりに「watchPosition」というメソッドを使います。これもgetCurrentPositionと同様に、引数が３つ用意されており、基本的な使い方はgetCurrentPositionとほぼ同じでしょう。

変数 = navigator.geolocation.watchPosition
    (onSuccess, onError, options);

成功時および失敗時の処理、オプション設定などを引数に設定する点は同じですが、１つ違っているのは「返り値を持っている」という点です。、この返り値はwatchIdと呼ばれるもので、GPS機能の監視に割り当てられるIDです。

このwatchIdは、GPS監視を停止する場合に必要となります。GPS監視を停止するには、以下のようにメソッドを呼び出します。

navigator.geolocation.clearWatch( watchId );

watchPositionも、やはりonSuccessの関数だけ設定してあれば使うことができます。下に、先ほどのサンプルをwatchPosition利用に書き換えたものを挙げておきます。ページをロードするとGPSアクセスを開始し、ボタンを押すと停止します。

実際にためしてみると、得られたGPSの値がそのまま変わりなければ更新がされないことがわかるでしょう。これは、取得したGPSデータオブジェクトをキャッシュして保管するためです。特にwifi接続のPCでGPSアクセスをした場合、たいていはwifiのルーターの位置情報が記録されているのを使っているため、位置情報は変わりません（ノートパソコンを持って室内を動きまわってもダメです）。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type"
		content="text/html; charset=utf-8">
	<title>Test</title>
	<style>
	body { padding:5px; }
	h1 { font-size:18pt; background-color:#EEEEFF; }
	</style>
	<script type="text/javascript">
	<!--
	var counter = 0;
	var watchId = 0;
	
	function doAction(){
		watchId = navigator.geolocation.watchPosition(getPosition);
	}

	function getPosition(p){
		var lat = p.coords.latitude;
		var lng = p.coords.longitude;
		document.getElementById("msg").innerHTML = ++counter + 
				": " + lat+"," + lng; 
	}
	
	function doCheck(){
		navigator.geolocation.clearWatch(watchId);
	}
	// -->
	</script>
	</head>
	<body onload="doAction();">
		<h1>GPS Sample</h1>
		<div id="msg"></div>
		<button onclick="doCheck();">Click</button>
	</body>
</html>

※関連コンテンツ

<< prev next >>

「JavaScriptによるHTML5プログラミング入門」に戻る