Skip to content

Instantly share code, notes, and snippets.

@ymnk

ymnk/geolocation.html

Last active December 20, 2015 17:49
Show Gist options
  • Save ymnk/6171775 to your computer and use it in GitHub Desktop.
Save ymnk/6171775 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
geolocation.html
<html>
<head>
<script type="text/javascript">
<!--
// Geolocation API[1] を使って、
// 開始地点と現在地の緯度・経度、及び両者の差を表示するためのプログラム
// [1] http://en.wikipedia.org/wiki/W3C_Geolocation_API
// 開始地点の緯度・経度を保持する変数
var start_latitude;
var start_longtitide;
// 開始地点を設定するための関数
// "開始"ボタンがクリックされたときに呼ばれる。
function reset(){
// Geolocation API の getCurrentPosition の呼び出しに成功した場合に
// 呼び出される関数
var fun = function(p){
// 開始地点を設定する
start_latitude = p.coords.latitude;
start_longtitude = p.coords.longitude;
// 緯度・経度を表示する
showLocation(p);
// 現在地点の緯度・経度を定期的に測位する
watchLocation();
};
var error = function(p){ alert("error: "+p.code); };
navigator.
geolocation.
getCurrentPosition(fun, error, {enableHighAccuracy:true/*,timeout : 50000*/});
}
// 緯度・経度を表示する為の関数
function showLocation(p){
// 現在地点の緯度・経度を取得する
var current_latitude = p.coords.latitude;
var current_longtitude = p.coords.longitude;
// 開始地点を表示する
var str="";
str+="開始地点<br/>";
str+="緯度: "+start_latitude+"<br/>";
str+="経度: "+start_longtitude+"<br/>";
var message=document.getElementById("message1");
message.innerHTML=str;
// 現在地を表示する
str="";
str+="現在地<br>";
str+="緯度: "+current_latitude+"<br/>";
str+="経度: "+current_longtitude+"<br/>";
str+="精度: "+p.coords.accuracy+"<br/>";
message=document.getElementById("message2");
message.innerHTML=str;
// 開始地点と現在地の差を表示する
str="";
str+="差<br>";
str+="緯度: "+(current_latitude-start_latitude)+"<br/>";
str+="経度: "+(current_longtitude-start_longtitude)+"<br/>";
message=document.getElementById("message3");
message.innerHTML=str;
}
// 緯度・経度を自動取得を開始する為の関数
var watchID = null;
function watchLocation(){
// 既に自動取得を開始していた場合はキャンセルする
if(watchID!=null)
navigator.geolocation.clearWatch(watchID);
// 緯度・経度の取得に成功した場合に呼ばれる関数
var fun = function(p){
// メッセージを表示する
showLocation(p);
};
var error = function(){ alert("error"); };
watchID = navigator.geolocation.watchPosition(fun, error, {enableHighAccuracy:true});
};
-->
</script>
<style type="text/css">
button, div { font-size: xx-large; }
</style>
</head>
<body>
<button onClick="reset()">開始</button>
<br/>
<div id="message1">開始地点</div>
<br/>
<div id="message2">現在地</div>
<br/>
<div id="message3">差</div>
</body>
</html>
Raw
geolocation2.html
<html>
<head>
<script type="text/javascript">
<!--
// Geolocation API[1] を使って、
// 開始地点と現在地の緯度・経度、及び両者の差を表示するためのプログラム
// [1] http://en.wikipedia.org/wiki/W3C_Geolocation_API
// 開始地点の緯度・経度を保持する変数
var start_latitude;
var start_longtitude;
// 開始地点を設定するための関数
// "開始"ボタンがクリックされたときに呼ばれる。
function reset(p){
var error = function(){ alert("error"); };
if(typeof(p)=="undefined"){
//console.log(window.count);
window.count = 0;
window.latitudes = new Array();
window.longtitudes = new Array();
if(watchID!=null){
navigator.geolocation.clearWatch(watchID);
watchID=null;
}
navigator.
geolocation.
getCurrentPosition(reset, error, {enableHighAccuracy:true, maximumAge: 0});
return;
}
if(window.count==10){
// 開始地点を設定する
//start_latitude = p.coords.latitude;
//start_longtitude = p.coords.longitude;
//alert(window.latitudes);
//alert(window.longtitudes);
start_latitude = average(window.latitudes);
start_longtitude = average(window.longtitudes);
// 緯度・経度を表示する
showLocation(p);
// 現在地点の緯度・経度を定期的に測位する
watchLocation();
}
else {
window.count++;
window.latitudes.push(p.coords.latitude);
window.longtitudes.push(p.coords.longitude);
document.getElementById("message1").innerHTML+=".";
setTimeout(function(){
navigator.
geolocation.
getCurrentPosition(reset, error, {enableHighAccuracy:true, maximumAge: 0});
}, 1000);
}
}
function average(a){
var foo = 0;
for(var i = 0, size = a.length; i < size; i++){
foo += a[i];
}
return foo/a.length;
}
// 緯度・経度を表示する為の関数
function showLocation(p){
// 現在地点の緯度・経度を取得する
var current_latitude = p.coords.latitude;
var current_longtitude = p.coords.longitude;
// 開始地点を表示する
var str="";
str+="開始地点<br/>";
str+="緯度: "+start_latitude+"<br/>";
str+="経度: "+start_longtitude+"<br/>";
var message=document.getElementById("message1");
message.innerHTML=str;
// 現在地を表示する
str="";
str+="現在地<br>";
str+="緯度: "+current_latitude+"<br/>";
str+="経度: "+current_longtitude+"<br/>";
str+="精度: "+p.coords.accuracy+"<br/>";
message=document.getElementById("message2");
message.innerHTML=str;
// 開始地点と現在地の差を表示する
str="";
str+="差<br>";
str+="緯度: "+(current_latitude-start_latitude)+"<br/>";
str+="経度: "+(current_longtitude-start_longtitude)+"<br/>";
message=document.getElementById("message3");
message.innerHTML=str;
}
// 緯度・経度を自動取得を開始する為の関数
var watchID = null;
function watchLocation(){
// 既に自動取得を開始していた場合はキャンセルする
if(watchID!=null)
navigator.geolocation.clearWatch(watchID);
// 緯度・経度の取得に成功した場合に呼ばれる関数
var fun = function(p){
// メッセージを表示する
showLocation(p);
};
var error = function(){ alert("error"); };
watchID = navigator.geolocation.watchPosition(fun, error, {enableHighAccuracy:true});
};
-->
</script>
<style type="text/css">
button, div { font-size: xx-large; }
</style>
</head>
<body>
<button onClick="reset()">開始2</button>
<br/>
<div id="message1">開始地点</div>
<br/>
<div id="message2">現在地</div>
<br/>
<div id="message3">差</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment