iphoneで位置情報を使う方法を探していたらgeolocationAPIというものを見つけたので使ってみた。これはアプリではなくsafariで位置情報を扱えるＡＰＩで、javascriptで簡単に実装できる。どうやらW3C公認のAPIらしく、geolocationAPIでググッたらW3Cのページが出てくる。
メインとなるファンクションは
・getCurrentPosition()
・watchPosition()
の2つの関数で、前者は単発の測定、後者は継続的な測定が行われる。
取れる情報は位置情報のみならず、標高、スピード、方向まで測定できる。かなり面白い！！それらを以下に列挙する。
-coords：データ群
・latitude：緯度
・longitude：経度
・altitude：標高
・accuracy：誤差（メートル）
・altitudeAccuracy：標高誤差（メートル）
・heading：方向（北に対する時計回りの角度）
・speed：スピード（m/s）
-timestamp：位置情報を取得した時刻
最初はgetCurrentPositionを使ってみたが、これだと単発の測定で打ち切られるため精度がかなり悪かった。そこでwatchPositionを使ってみたら精度の問題は解消された。しかしwatchPositionは永遠に毎秒測定してしまうので、ある程度の制御が必要だった。そこで誤差（accuracy）が300メートル以下になるか、測定開始から15秒以上経過したら測定を終了するように書いてみた。以下に示す。
これで正確な位置を取得し、表示できるようになった。
geolocationAPIはHTML5から実装された新しい機能らしい。まだサポートしているブラウザは少ない。
オライリー
入門書 geolocationAPI以外にもHTML5で登場した新しいＡＰＩが紹介されている！
メインとなるファンクションは
・getCurrentPosition()
・watchPosition()
の2つの関数で、前者は単発の測定、後者は継続的な測定が行われる。
取れる情報は位置情報のみならず、標高、スピード、方向まで測定できる。かなり面白い！！それらを以下に列挙する。
-coords：データ群
・latitude：緯度
・longitude：経度
・altitude：標高
・accuracy：誤差（メートル）
・altitudeAccuracy：標高誤差（メートル）
・heading：方向（北に対する時計回りの角度）
・speed：スピード（m/s）
-timestamp：位置情報を取得した時刻
最初はgetCurrentPositionを使ってみたが、これだと単発の測定で打ち切られるため精度がかなり悪かった。そこでwatchPositionを使ってみたら精度の問題は解消された。しかしwatchPositionは永遠に毎秒測定してしまうので、ある程度の制御が必要だった。そこで誤差（accuracy）が300メートル以下になるか、測定開始から15秒以上経過したら測定を終了するように書いてみた。以下に示す。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<title>geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<script type="text/javascript">
function display(pos,ptime){
var a = document.getElementById("test");
var b=["<ul>",
"<li>time: ",ptime/1000,"</li>",
"<li>timestamp : ",pos.timestamp,"</li>",
"<li>lat : ",pos.coords.latitude,"</li>",
"<li>lon: ",pos.coords.longitude,"</li>",
"<li>accuracy: ",pos.coords.accuracy,"</li>",
"<li>alt: ",pos.coords.altitude,"</li>",
"<li>altaccuracy: ",pos.coords.altitudeAccuracy,"</li>",
"<li>head: ",pos.coords.heading,"</li>",
"<li>speed: ",pos.coords.speed,"</li>",
"</ul>"];
a.innerHTML = b.join('');
}
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="watch position" onclick="watchPos();">
<div id="test"></div>
</body>
</html>
これで正確な位置を取得し、表示できるようになった。
geolocationAPIはHTML5から実装された新しい機能らしい。まだサポートしているブラウザは少ない。
オライリー
入門書 geolocationAPI以外にもHTML5で登場した新しいＡＰＩが紹介されている！