1. 程式人生 > >第182天:HTML5——地理定位

第182天:HTML5——地理定位

document esc function -- 註意 arc iss show city

HTML5 Geolocation(地理定位)

HTML5 Geolocation API 用於獲得用戶的地理位置。 鑒於該特性可能侵犯用戶的隱私,除非用戶同意,否則用戶位置信息是不可用的。

瀏覽器支持情況

Internet Explorer 9+, Firefox, Chrome, SafariOpera 支持Geolocation(地理定位) 註意:Geolocation(地理定位)對於擁有 GPS 的設備,比如 iPhone,地理定位更加精確。

一、getCurrentPosition() 方法

1、使用 getCurrentPosition() 方法來獲得用戶的位置。

2、該方法屬於navigator.geolocation

3、同時該方法有三個參數,一個是成功時運行的函數,一個是失敗時返回的函數,還有一個是可選參數

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

4、地理定位實例----(可返回用戶位置的經度和緯度 ):

 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 }

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

2、如果支持,則運行 getCurrentPosition() 方法。如果不支持,則向用戶顯示一段消息。

3、如果getCurrentPosition()運行成功,則向參數showPosition中規定的函數返回一個coordinates對象

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

5、處理錯誤和拒絕

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 - 操作超時

6、在地圖中顯示結果

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

 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>

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

技術分享圖片

二、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 }

第182天:HTML5——地理定位