Geolocation　API-01

HTML5では、位置情報取得のためのGeolocationAPIが用意されています。

現在地の取得

実　例

ＨＴＭＬソース

<form>
<input type="button" id="get" value="現在地の位置情報を取得"><br>
<input type="button" id="stop" value="位置情報の取得を停止">
</form>

スクリプトサンプル

// 現在地の情報を表示
window.addEventListener("load", function(){
// 情報を表示するための領域を指し示す変数
var ele = document.getElementById("status");

// Geolocation APIに対応しているか調べる
if (!navigator.geolocation){
ele.innerHTML = "Geolocation APIに対応していません";
return;
}

// 監視用IDを入れるための変数
var watchID = null;
document.getElementById("get").addEventListener("click", function(){
var option = {
enableHighAccuracy : true,// 詳細な位置を取得
timeout : 60*1000,// タイムアウトまでは60秒
maximumAge : 0// 最新のデータを取得
}
watchID = navigator.geolocation.watchPosition(getPos, errPos, option);
}, true);
// 位置情報を取得した場合に処理を行う関数
function getPos(position){
var lat = position.coords.latitude;// 緯度
var lng = position.coords.longitude;// 経度
var alt = position.coords.altitude;// 高度
var acc = position.coords.accuracy;// 緯度経度の誤差
var altAcc = position.coords.altitudeAccuracy;// 高度の誤差
var hd = position.coords.heading;// 方角
ele.innerHTML = "緯度："+lat+"<br>経度："+lng+"<br>緯度経度の誤差："+acc+" m<br>"+
"高度："+alt+"<br>高度の誤差："+altAcc+" m<br>方角："+hd;
}
// 位置情報の取得に失敗した場合に処理を行う関数
function errPos(error){
var message = [ "",
"ユーザーが位置情報の提供を拒否しました",
"何らかの原因で位置情報を取得できませんでした",
"タイムアウトしました。時間内に位置を特定できませんでした"
]
ele.innerHTML = error.code+"："+message[error.code];
}
// 位置情報の定期的な取得を停止
document.getElementById("stop").addEventListener("click", function(){
// 位置情報の取得が行われていない場合は何もしない
if(watchID == null){
ele.innerHTML = "位置情報の取得は行っていません";
return;
}
navigator.geolocation.clearWatch(watchID);
ele.innerHTML = "位置情報の取得を停止しました";
// 監視を解除したことを示すのでnullを入れる
watchID = null;
}, true);
}, true);