geolocationでの位置情報取得

javascript geolocation

iphone safariやfirefox3.5以上で、javascriptを用いて位置情報が取得できる。
http://dev.w3.org/geo/api/spec-source.html

簡単に、getCurrentPositionで位置情報が取得できるのだが
iphoneでやると、なんとも精度が悪い。
一発の取得精度に依存する。
accuracyをみると700とかとんでもない値がかえってくる。
おそらく基地局依存？

そこでwatchPositionをつかって連続して取得し、一定精度になったら取得をやめる実装を行う。

こちらがgetCurrentPosition

navigator.geolocation.getCurrentPosition(function(pos){
//pos.coords.latitude, pos.coords.longitudeに緯度経度が入ってる
},
function(error){},
{enableHighAccuracy:true,timeout:1000,maximumAge:0}
);

watchPositionを使って実装

var wathId;
watchId = navigator.geolocation.watchPosition(function(pos){
//任意の精度以下になったら取得をやめる
if(pos.coords.accuracy < 300){
navigator.geolocation.clearWatch(watchId);
},
function(error){},
{enableHighAccuracy:true,timeout:1000,maximumAge:0}
);

これで満足いく精度が得られる。
ただ任意の精度以下にならない場合の処理時間でtimeoutするなどの工夫が必要。

サンプルソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
</head>
<body>
<script type="text/javascript">
function getPos(){
	navigator.geolocation.getCurrentPosition(sFunc,
fFunc,
{enableHighAccuracy:true,timeout:1000,maximumAge:0} );
}
var sFunc=function(pos){
	alert(pos.coords.accuracy);
	if(pos.coords.accuracy>100){
		getPos();
	}
		
}
function display(pos,ptime){
	var a = document.getElementById("test");
	var b=["<ul>",
	"<li>time: ",ptime/1000,"</li>",
	"<li>lat : ",pos.coords.latitude,"</li>",
	"<li>lon: ",pos.coords.longitude,"</li>",
	"<li>accuracy: ",pos.coords.accuracy,"</li>",
	"</ul>"];
	a.innerHTML = b.join('');	
}
var fFunc=function(e) {
	
}
var watchId;
var startTime;
var currentTime;
function watchPos(){
    startTime = new Date();
	watchId = navigator.geolocation.watchPosition(function(pos){
            currentTime = new Date();
            var processingTime = currentTime - startTime;
		display(pos,processingTime);
        if(pos.coords.accuracy < 300 || processingTime > 15000){
        navigator.geolocation.clearWatch(watchId);
			}
	},function(){},
{enableHighAccuracy:true,timeout:1000,maximumAge:0});
}
</script>
<input type="button" value="get Position" onclick="getPos();">
<input type="button" value="watch position" onclick="watchPos();">
<div id="test"></div>
</body>
</html>

入門 HTML5

入門 HTML5

JavaScript 第6版

JavaScript 第6版