[Andriod]移动Web应用程序开发HTML5篇 (五) 地理位置API

1. 地理位置API介绍

 

地位位置(Geolocation) API是HTML5引入的一个非常诱人的API，它在移动web应用的开发中非常有价值。只需要几行很简单的代码即可实现获取用户的地位位置。目前浏览器对其支持情况如下图：

 

 

HTML5的地理位置API依次通过以下几个方式获取位置信息：1. IP地址，2. GPS定位，3. MAC地址，4. GSM基站网络，5. 用户定义的地址位置。如下图所示，优先级为逆时钟方向。

 

 

2. 使用地理位置API

 

地位位置(Geolocation) API使用非常方便，一个典型的判断浏览器是否支持HTML5 Geolocation API的函数：

 

01 function updateLocation(position) {
02  
03     var latitude = position.coords.latitude;
04  
05     var longitude = position.coords.longitude;
06  
07  
08     if (!latitude || !longitude) {
09  
10         document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser, but location is currently not available.";
11  
12         return;
13  
14     }
15  
16  
17     document.getElementById("latitude").innerHTML = latitude;
18  
19     document.getElementById("longitude").innerHTML = longitude;
20  
21 }
在这段代码中，使用
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
这两个变量来保存经度和纬度，并将其返回给HTML代码，本例的其余代码如下所示：
01 <!DOCTYPE html>
02  
03 <head>
04  
05     <meta charset="utf-8">
06  
07     <title>HTML5 Geolocation</title>
08  
09     <link rel="stylesheet" href="styles.css">
10  
11 </head>
12  
13  
14 <body onload="loadDemo()">
15  
16  
17 <h1>HTML5 Geolocation Example</h1>
18  
19  
20 <span class="info">
21  
22   <p id="status">HTML5 Geolocation is <strong>not</strong> supported in your browser.</p>
23  
24 </span>
25  
26  
27 <h2>Current Position:</h2>
28  
29 <table border="1">
30  
31           <tr>
32  
33             <th width="40" scope="col"><h5 align="left">Lat.</h5></th>
34  
35              <td width="114" id="latitude">?</td>
36  
37           </tr>
38  
39           <tr>
40  
41             <td><h5>Long.</h5></td>
42  
43             <td id="longitude">?</td>
44  
45           </tr>
46  
47           <tr>
48  
49             <td><h5>Time</h5></td>
50  
51             <td id="longitude2">11:00:00 a.m.</td>
52  
53           </tr>
54  
55 </table>
56  
57  
58 <p align="center" class="style2">Copyright (c) 2010</p>
59  
60  
61 <script type="text/javascript">
62  
63  
64     function loadDemo() {
65  
66         if(navigator.geolocation) {
67  
68             document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
69  
70             navigator.geolocation.getCurrentPosition(updateLocation);
71  
72         }
73  
74     }
其运行结果如下图：
同样可以将经度纬度赋值给相应google map的api，得出下图所示的结果：
3.地理位置API获取流程
相信很多人会问地位位置(Geolocation) API使用的确非常方便，但是也太危险了，用户如何知道哪个应用程序在获取我的位置信息呢？用户如何进行权限设置呢。
图中标出的1， 2， 3 ，4 分别表示：
1. 表明一个用户试图打开一个调用地理位置信息的应用程序
2. 正常情况下，应用程序通过地位位置函数获取位置信息就可以了，但是浏览器会在这个地方将其中断，并请求用户授权，如果通过，则调用该函数，否则返回permission denied。
3. 浏览器根据上文所述的优先级依次获取设备相关信息，如果IP 地址，GPS信息等等，这是浏览器内部的行为。
4. 浏览器将坐标信息发送给外部的可信任的位置服务提供商哪里，如google map，位置服务提供商返回该位置的具体信息。
4. 地理位置API 例子
这是一个稍微复杂一点的例子，这个例子主要实现一个实时HTML5定位系统，主要代码如下：
001 <script type="text/javascript">
002  
003  
004     var totalDistance = 0.0;
005  
006     var lastLat;
007  
008     var lastLong;
009  
010  
011     Number.prototype.toRadians = function() {
012  
013       return this * Math.PI / 180;
014  
015     }
016  
017  
018     function distance(latitude1, longitude1, latitude2, longitude2) {
019  
020       // R is the radius of the earth in kilometers
021  
022       var R = 6371;
023  
024  
025       var deltaLatitude = (latitude2-latitude1).toRadians();
026  
027       var deltaLongitude = (longitude2-longitude1).toRadians();
028  
029       latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();
030  
031  
032       var a = Math.sin(deltaLatitude/2) *
033  
034               Math.sin(deltaLatitude/2) +
035  
036               Math.cos(latitude1) *
037  
038               Math.cos(latitude2) *
039  
040               Math.sin(deltaLongitude/2) *
041  
042               Math.sin(deltaLongitude/2);
043  
044  
045       var c = 2 * Math.atan2(Math.sqrt(a),
046  
047                              Math.sqrt(1-a));
048  
049       var d = R * c;
050  
051       return d;
052  
053     }
054  
055  
056     function updateStatus(message) {
057  
058         document.getElementById("status").innerHTML = message;
059  
060     }
061  
062  
063     function loadDemo() {
064  
065         if(navigator.geolocation) {
066  
067             updateStatus("HTML5 Geolocation is supported in your browser.");
068  
069             navigator.geolocation.watchPosition(updateLocation,
070  
071                                                 handleLocationError,
072  
073                                                 {maximumAge:20000});
074  
075         }
076  
077     }
078  
079  
080     function updateLocation(position) {
081  
082         var latitude = position.coords.latitude;
083  
084         var longitude = position.coords.longitude;
085  
086         var accuracy = position.coords.accuracy;
087  
088         var timestamp = position.timestamp;
089  
090  
091         document.getElementById("latitude").innerHTML = latitude;
092  
093         document.getElementById("longitude").innerHTML = longitude;
094  
095         document.getElementById("accuracy").innerHTML = accuracy;
096  
097         document.getElementById("timestamp").innerHTML = timestamp;
098  
099  
100         // sanity test... don't calculate distance if accuracy
101  
102         // value too large
103  
104         if (accuracy >= 500) {
105  
106             updateStatus("Need more accurate values to calculate distance.");
107  
108             return;
109  
110         }
111  
112  
113         // calculate distance
114  
115  
116         if ((lastLat != null) && (lastLong != null)) {
117  
118             var currentDistance = distance(latitude, longitude, lastLat, lastLong);
119  
120             document.getElementById("currDist").innerHTML =
121  
122               "Current distance traveled: " + currentDistance.toFixed(4) + " km";
123  
124  
125             totalDistance += currentDistance;
126  
127  
128             document.getElementById("totalDist").innerHTML =
129  
130               "Total distance traveled: " + currentDistance.toFixed(4) + " km";
131  
132         }
133  
134  
135         lastLat = latitude;
136  
137         lastLong = longitude;
138  
139  
140         updateStatus("Location successfully updated.");
141  
142     }
143  
144  
145     function handleLocationError(error) {
146  
147         switch(error.code)
148  
149         {
150  
151         case 0:
152  
153           updateStatus("There was an error while retrieving your location: " + error.message);
154  
155           break;
156  
157         case 1:
158  
159           updateStatus("The user prevented this page from retrieving a location.");
160  
161           break;
162  
163         case 2:
164  
165           updateStatus("The browser was unable to determine your location: " + error.message);
166  
167           break;
168  
169         case 3:
170  
171           updateStatus("The browser timed out before retrieving the location.");
172  
173           break;
174  
175         }
176  
177     }
178  
179  
180 </script>
完整代码下载地址：下载

 

posted @ 2014-06-06 08:05  It's_Lee  阅读(225)  评论(0)  编辑  收藏  举报