HTML5-新API-geolocation-实例-距离跟踪器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5-新API-geolocation-实例-距离跟踪器相关的知识，希望对你有一定的参考价值。
1 <body onLoad="loadDemo()"> 2 <header> 3 <h1>oldmeter演示</h1> 4 <h4>距离跟踪器</h4> 5 </header> 6 <section> 7 <article> 8 <header> 9 <h1>你的位置</h1> 10 <p class="info" id="status">地理位置是不是在你的浏览器支持。</p> 11 <div class="geostatus"> 12 <p id="latitude">纬度:</p> 13 <p id="longitude">经度:</p> 14 <p id="accuracy">精度:</p> 15 <p id="altitude">海拔：</p> 16 <p id="altitudeAccuracy">海拔精度：</p> 17 <p id="heading">行进方向、相对于正北：</p> 18 <p id="speed">速度(m/s):</p> 19 <p id="timestamp">时间戳:</p> 20 <p id="currDist">目前距离旅行：</p> 21 <p id="totalDist">总距离：</p> 22 </div> 23 </header> 24 </article> 25 </section> 26 <footer> 27 <h2>使用html5，和你的脚！</h2> 28 </footer> 29 <script type="text/javascript"> 30 var totalDistance=0.0; 31 var lastLat; 32 var lastLong; 33 34 Number.prototype.toRadians=function(){ 35 return this * Math.PI/180; 36 } 37 38 function distance(latitude1,longitude1,latitude2,longitude2){ 39 var R=6371;//R是地球半径，单位是km 40 var deltalatitude=(latitude2-latitude1).toRadians(); 41 var deltaLongitude=(longitude2-longitude1).toRadians(); 42 latitude1=latitude1.toRadians(); 43 latitude2=latitude2.toRadians(); 44 45 var a=Math.sin(deltalatitude/2) * 46 Math.sin(deltalatitude/2) + 47 Math.cos(latitude1) * 48 Math.cos(latitude2) * 49 Math.sin(deltaLongitude/2) * 50 Math.sin(deltaLongitude/2); 51 var c=2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); 52 var d=R*c; 53 return d; 54 55 } 56 57 function updateErrorStatus(message){ 58 document.getElementById("status").style.background="papayaWhip"; 59 document.getElementById("status").innerHTML="<strong>Error</strong>:"+message; 60 61 } 62 63 function updateStatus(message){ 64 document.getElementById("status").style.background="paleGreen"; 65 document.getElementById("status").innerHTML=message; 66 67 } 68 69 70 function loadDemo(){ 71 //检查浏览器是否支持geolocation 72 if(navigator.geolocation){ 73 document.getElementById("status").innerHTML="在你的浏览器支持HTML5 Geolocation"; 74 navigator.geolocation.watchPosition(updateLocation,handleLocationError,{timeout:10000}); 75 } 76 } 77 78 79 function updateLocation(position){ 80 81 var latitude=position.coords.latitude;//纬度 82 var longitude=position.coords.longitude;//经度 83 var accuracy=position.coords.accuracy;//精度(准确度）单位米 84 var altitude=position.coords.altitude;//海拔 85 var altitudeAccuracy=position.coords.altitudeAccuracy;//海拔精度 单位米 86 var heading=position.coords.heading;//行进方向、相对于正北 87 var speed=position.coords.speed;//速度m/s 88 var timestamp=position.timestamp;//时间戳 89 90 document.getElementById("latitude").innerHTML="北纬度："+latitude; 91 document.getElementById("longitude").innerHTML="东经度："+longitude; 92 document.getElementById("accuracy").innerHTML="精度："+accuracy+"米"; 93 document.getElementById("altitude").innerHTML="海拔："+altitude+"米"; 94 document.getElementById("altitudeAccuracy").innerHTML="海拔精度："+altitudeAccuracy; 95 document.getElementById("heading").innerHTML="行进方向："+heading; 96 document.getElementById("speed").innerHTML="速度："+speed+"米"; 97 document.getElementById("timestamp").innerHTML="时间戳："+timestamp; 98 99 //合理性检查...如果accuracy的值太大就不要计算距离了 100 if(accuracy>=30000){ 101 102 updateStatus("需要更精确的值来计算距离"); 103 return; 104 } 105 106 107 if((lastLat !=null)&&(lastLong !=null)){ 108 var currentDistance =distance(latitude,longitude,lastLat,lastLong); 109 110 document.getElementById("currDist").innerHTML="目前距离旅行"+currentDistance.toFixed(2)+"km"; 111 totalDistance +=currentDistance; 112 document.getElementById("totalDist").innerHTML="总距离"+currentDistance.toFixed(2)+"km"; 113 114 updateStatus("位置成功更新。"); 115 lastLong=longitude; 116 } 117 } 118 119 //错误处理 120 function handleLocationError(error){ 121 switch(error.code){ 122 case 0: 123 updateErrorStatus("有一个错误在获取你的位置:错误信息"+error.message); 124 break; 125 case 1: 126 updateErrorStatus("用户选择不分享他或她的位置。"); 127 break; 128 case 2: 129 updateErrorStatus("浏览器无法确定自己的位置,错误信息"+error.message); 130 break; 131 case 3: 132 updateErrorStatus("在检索位置之前，浏览器超时。"); 133 break; 134 } 135 } 136 </script> 137 </body>
以上是关于HTML5-新API-geolocation-实例-距离跟踪器的主要内容，如果未能解决你的问题，请参考以下文章