第182天：HTML5——地理定位
HTML5 Geolocation（地理定位）
HTML5 Geolocation API 用於獲得用戶的地理位置。 鑒於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。
瀏覽器支持情況
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持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——地理定位