html5--geolocation实践

浏览数：30 / 时间：2015年06月09日

html5太强大了，新功能我就不废话了。看下一个geolocation的实例吧

应用geolocation获取用户的地理位置（原文链接http://www.ibm.com/developerworks/cn/web/1208_wangjian_html5geo/index.html）

  1 <!DOCTYPE html>
  2 <head>
  3     <meta charset="utf-8">
  4     <title>HTML5 Geolocation距离跟踪器</title>
  5 </head>
  6 
  7 <body onload="loadDemo()">
  8 
  9 <h1>HTML5 Geolocation距离跟踪器</h1>
 10 
 11 <p id="status">该浏览器不支持HTML5 Geolocation。</p>
 12 
 13 <h2>当前位置：</h2>
 14 <table border="1">
 15 <tr>
 16 <td width="40" scope="col">纬度</th>
 17 <td width="114" id="latitude">?</td>
 18 </tr>
 19 <tr>
 20 <td>经度</td>
 21 <td id="longitude">?</td>
 22 </tr>
 23 <tr>
 24 <td>准确度</td>
 25 <td id="accuracy">?</td>
 26 </tr>
 27 </table>
 28 
 29 <h4 id="currDist">本次移动距离：0 千米</h4>
 30 <h4 id="totalDist">总计移动距离：0 千米</h4>
 31 
 32 
 33 <script type="text/javascript">
 34 
 35     var totalDistance = 0.0;
 36     var lastLat;
 37     var lastLong;
 38 
 39     function toRadians(degree) {
 40       return this * Math.PI / 180;
 41     }
 42 
 43 
 44     function distance(latitude1, longitude1, latitude2, longitude2) {
 45       // R是地球半径（KM）
 46       var R = 6371;
 47 
 48       var deltaLatitude = toRadians(latitude2-latitude1);
 49       var deltaLongitude = toRadians(longitude2-longitude1);
 50       latitude1 = toRadians(latitude1);
 51       latitude2 = toRadians(latitude2);
 52 
 53       var a = Math.sin(deltaLatitude/2) *
 54               Math.sin(deltaLatitude/2) +
 55               Math.cos(latitude1) *
 56               Math.cos(latitude2) *
 57               Math.sin(deltaLongitude/2) *
 58               Math.sin(deltaLongitude/2);
 59 
 60       var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
 61       var d = R * c;
 62       return d;
 63     }
 64 
 65 
 66     function updateStatus(message) {
 67         document.getElementById("status").innerHTML = message;
 68     }
 69 
 70     function loadDemo() {
 71         if(navigator.geolocation) {
 72             updateStatus("浏览器支持HTML5 Geolocation。");
 73             navigator.geolocation.watchPosition(updateLocation, handleLocationError, {maximumAge:20000});
 74         }
 75     }
 76 
 77     function updateLocation(position) {
 78         var latitude = position.coords.latitude;
 79         var longitude = position.coords.longitude;
 80         var accuracy = position.coords.accuracy;
 81 
 82         document.getElementById("latitude").innerHTML = latitude;
 83         document.getElementById("longitude").innerHTML = longitude;
 84         document.getElementById("accuracy").innerHTML = accuracy;
 85 
 86         // 如果accuracy的值太大，我们认为它不准确，不用它计算距离
 87         if (accuracy >= 500) {
 88             updateStatus("这个数据太不靠谱，需要更准确的数据来计算本次移动距离。");
 89             return;
 90         }
 91 
 92         // 计算移动距离
 93 
 94         if ((lastLat != null) && (lastLong != null)) {
 95             var currentDistance = distance(latitude, longitude, lastLat, lastLong);
 96             document.getElementById("currDist").innerHTML =
 97               "本次移动距离：" + currentDistance.toFixed(4) + " 千米";
 98 
 99             totalDistance += currentDistance;
100 
101             document.getElementById("totalDist").innerHTML =
102               "总计移动距离：" + currentDistance.toFixed(4) + " 千米";
103         }
104 
105         lastLat = latitude;
106         lastLong = longitude;
107 
108         updateStatus("计算移动距离成功。");
109     }
110 
111     function handleLocationError(error) {
112         switch(error.code)
113         {
114         case 0:
115           updateStatus("尝试获取您的位置信息时发生错误：" + error.message);
116           break;
117         case 1:
118           updateStatus("用户拒绝了获取位置信息请求。");
119           break;
120         case 2:
121           updateStatus("浏览器无法获取您的位置信息：" + error.message);
122           break;
123         case 3:
124           updateStatus("获取您位置信息超时。");
125           break;
126         }
127     }
128 
129 </script>
130 </body>
131 </html>