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
时间： 2024-11-06 14:10:35