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>

 

posted @ 2016-02-28 22:05  Window2016  阅读(363)  评论(0)    收藏  举报