标签：
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>
详情请看：http://www.ibm.com/developerworks/cn/web/1208_wangjian_html5geo/index.html
标签：
原文地址：http://www.cnblogs.com/wuLiuyang/p/4194845.html
