[Andriod]移動Web應用程序開發HTML5篇 (五) 地理位置API

時間  2019-11-21
標籤 andriod 移動 web 應用 程序 開發 html5 html 地理位置 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>
完整代碼下載地址： 下載
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程