第182天：HTML5——地理定位

時間 2019-12-02

標籤 182天 html5 html 地理定位欄目 HTML5 简体版

原文原文鏈接

HTML5 Geolocation（地理定位）

HTML5 Geolocation API 用於得到用戶的地理位置。鑑於該特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的。javascript

瀏覽器支持狀況html

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）注意：Geolocation（地理定位）對於擁有 GPS 的設備，好比 iPhone，地理定位更加精確。java

1、getCurrentPosition() 方法

一、使用 getCurrentPosition() 方法來得到用戶的位置。git

二、該方法屬於navigator.geolocationapi

三、同時該方法有三個參數，一個是成功時運行的函數，一個是失敗時返回的函數，還有一個是可選參數。瀏覽器

1 navigator.geolocation.getCurrentPosition(success,error,{
2    // 指示瀏覽器獲取高精度的位置，默認爲false
3    enableHighAccuracy: true,
4    // 指定獲取地理位置的超時時間，默認不限時，單位爲毫秒
5    timeout: 5000,
6    // 最長有效期，在重複獲取地理位置時，此參數指定多久再次獲取位置。
7    maximumAge: 3000
8 })

四、地理定位實例----（可返回用戶位置的經度和緯度）：函數

 1 var x=document.getElementById("demo"); 
 2 function getLocation() 
 3 { 
 4     if (navigator.geolocation) 
 5     { 
 6         navigator.geolocation.getCurrentPosition(showPosition); 
 7     } 
 8     else 
 9     { 
10         x.innerHTML="該瀏覽器不支持獲取地理位置。"; 
11     } 
12 } 
13 
14 function showPosition(position) 
15 { 
16     x.innerHTML="緯度: " + position.coords.latitude + 
17     "<br>經度: " + position.coords.longitude;     
18 }

實例解析: 一、檢測是否支持地理定位測試

二、若是支持，則運行 getCurrentPosition() 方法。若是不支持，則向用戶顯示一段消息。spa

三、若是getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象code

四、showPosition() 函數得到並顯示經度和緯度上面的例子是一個很是基礎的地理定位腳本，不含錯誤處理。

五、處理錯誤和拒絕

getCurrentPosition() 方法的第二個參數用於處理錯誤。它規定當獲取用戶位置失敗時運行的函數

 1 function showError(error) 
 2 { 
 3     switch(error.code) 
 4     { 
 5         case error.PERMISSION_DENIED: 
 6             x.innerHTML="用戶拒絕對獲取地理位置的請求。" 
 7             break; 
 8         case error.POSITION_UNAVAILABLE: 
 9             x.innerHTML="位置信息是不可用的。" 
10             break; 
11         case error.TIMEOUT: 
12             x.innerHTML="請求用戶地理位置超時。" 
13             break; 
14         case error.UNKNOWN_ERROR: 
15             x.innerHTML="未知錯誤。" 
16             break; 
17     } 
18 }

錯誤代碼：

Permission denied - 用戶不容許地理定位

Position unavailable - 沒法獲取當前位置

Timeout - 操做超時

六、在地圖中顯示結果

如需在地圖中顯示結果，您須要訪問可以使用經緯度的地圖服務，好比谷歌地圖或百度地圖：

 1 <style>
 2      #map{
 3           width:1000px;height:1000px;
 4      }
 5     </style>
 6     
 7     <body>
 8     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=ED2d81c757f7791bca47640cce651789"></script>
 9     <script>
10       function success (position) {
11           alert("now show");
12         var la=position.coords.latitude;
13         var lo=position.coords.longitude;
14         alert(la);
15         var map = new BMap.Map("map");                        // 建立Map實例
16         map.centerAndZoom(new BMap.Point(lo,la), 15);     // 初始化地圖,設置中心點座標和地圖級別
17         map.addControl(new BMap.NavigationControl());               // 添加平移縮放控件
18         map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
19         map.addControl(new BMap.OverviewMapControl());              //添加縮略地圖控件
20         map.enableScrollWheelZoom();                            //啓用滾輪放大縮小
21         map.addControl(new BMap.MapTypeControl());          //添加地圖類型控件
22         map.setCurrentCity("北京");          // 設置地圖顯示的城市 此項是必須設置的
23         var local = new BMap.LocalSearch(map, {
24          renderOptions: {map: map, panel: "r-result"}
25           });
26       
27  local.search("酒店")
28       }
29       function error (errorCode) {
30        alert(errorCode.code+"--"+errorCode.message);
31       }
32      var options={};
33       if(navigator.geolocation){
34         navigator.geolocation.getCurrentPosition(success,error,options)
35       }else{
36       alert("您的瀏覽器out了");
37       }
38     </script>
39     11111111
40     <div id="map">
41     </div>
42     </body>
43 </html>

七、getCurrentPosition() 方法 - 返回數據

2、Geolocation 對象 - 其餘有趣的方法

HTML5 watchPosition 監聽地理位置變化- 返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。

clearWatch() - 中止 watchPosition() 方法

下面的例子展現 watchPosition() 方法。您須要一臺精確的 GPS 設備來測試該例（好比 iPhone）：

 1 var x=document.getElementById("demo"); 
 2 function getLocation() 
 3 { 
 4     if (navigator.geolocation) 
 5     { 
 6         navigator.geolocation.watchPosition(showPosition); 
 7     } 
 8     else 
 9     { 
10         x.innerHTML="該瀏覽器不支持獲取地理位置。"; 
11     } 
12 } 
13 function showPosition(position) 
14 { 
15     x.innerHTML="緯度: " + position.coords.latitude + 
16     "<br>經度: " + position.coords.longitude; 
17 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。