HTML5-新API-geolocation-实例-距离跟踪器

 <body onLoad="loadDemo()">
<header>
<h1>oldmeter演示</h1>
<h4>距离跟踪器</h4>
</header>
<section>
<article>
<header>
<h1>你的位置</h1>
<p class="info" id="status">地理位置是不是在你的浏览器支持。</p>
<div class="geostatus">
<p id="latitude">纬度:</p>
<p id="longitude">经度:</p>
<p id="accuracy">精度:</p>
<p id="altitude">海拔:</p>
<p id="altitudeAccuracy">海拔精度:</p>
<p id="heading">行进方向、相对于正北:</p>
<p id="speed">速度(m/s):</p>
<p id="timestamp">时间戳:</p>
<p id="currDist">目前距离旅行:</p>
<p id="totalDist">总距离:</p>
</div>
</header>
</article>
</section>
<footer>
<h2>使用HTML5,和你的脚!</h2>
</footer>
<script type="text/javascript">
var totalDistance=0.0;
var lastLat;
var lastLong; Number.prototype.toRadians=function(){
return this * Math.PI/;
} function distance(latitude1,longitude1,latitude2,longitude2){
var R=;//R是地球半径,单位是km
var deltalatitude=(latitude2-latitude1).toRadians();
var deltaLongitude=(longitude2-longitude1).toRadians();
latitude1=latitude1.toRadians();
latitude2=latitude2.toRadians(); var a=Math.sin(deltalatitude/) *
Math.sin(deltalatitude/) +
Math.cos(latitude1) *
Math.cos(latitude2) *
Math.sin(deltaLongitude/) *
Math.sin(deltaLongitude/);
var c=*Math.atan2(Math.sqrt(a),Math.sqrt(-a));
var d=R*c;
return d; } function updateErrorStatus(message){
document.getElementById("status").style.background="papayaWhip";
document.getElementById("status").innerHTML="<strong>Error</strong>:"+message; } function updateStatus(message){
document.getElementById("status").style.background="paleGreen";
document.getElementById("status").innerHTML=message; } function loadDemo(){
//检查浏览器是否支持geolocation
if(navigator.geolocation){
document.getElementById("status").innerHTML="在你的浏览器支持HTML5 Geolocation";
navigator.geolocation.watchPosition(updateLocation,handleLocationError,{timeout:});
}
} function updateLocation(position){ var latitude=position.coords.latitude;//纬度
var longitude=position.coords.longitude;//经度
var accuracy=position.coords.accuracy;//精度(准确度)单位米
var altitude=position.coords.altitude;//海拔
var altitudeAccuracy=position.coords.altitudeAccuracy;//海拔精度 单位米
var heading=position.coords.heading;//行进方向、相对于正北
var speed=position.coords.speed;//速度m/s
var timestamp=position.timestamp;//时间戳 document.getElementById("latitude").innerHTML="北纬度:"+latitude;
document.getElementById("longitude").innerHTML="东经度:"+longitude;
document.getElementById("accuracy").innerHTML="精度:"+accuracy+"米";
document.getElementById("altitude").innerHTML="海拔:"+altitude+"米";
document.getElementById("altitudeAccuracy").innerHTML="海拔精度:"+altitudeAccuracy;
document.getElementById("heading").innerHTML="行进方向:"+heading;
document.getElementById("speed").innerHTML="速度:"+speed+"米";
document.getElementById("timestamp").innerHTML="时间戳:"+timestamp; //合理性检查...如果accuracy的值太大就不要计算距离了
if(accuracy>=){ updateStatus("需要更精确的值来计算距离");
return;
} if((lastLat !=null)&&(lastLong !=null)){
var currentDistance =distance(latitude,longitude,lastLat,lastLong); document.getElementById("currDist").innerHTML="目前距离旅行"+currentDistance.toFixed()+"km";
totalDistance +=currentDistance;
document.getElementById("totalDist").innerHTML="总距离"+currentDistance.toFixed()+"km"; updateStatus("位置成功更新。");
lastLong=longitude;
}
} //错误处理
function handleLocationError(error){
switch(error.code){
case :
updateErrorStatus("有一个错误在获取你的位置:错误信息"+error.message);
break;
case :
updateErrorStatus("用户选择不分享他或她的位置。");
break;
case :
updateErrorStatus("浏览器无法确定自己的位置,错误信息"+error.message);
break;
case :
updateErrorStatus("在检索位置之前,浏览器超时。");
break;
}
}
</script>
</body>
上一篇:VirtualBox虚拟机安装MSDOS和MINIX2.0.0双系统


下一篇:android中如何在低版本(5.0之前)上使用tint(着色)属性