h5地理位置API
地理API允許javascript程序向瀏覽器詢問用戶的真實地理位置，支持地理位置API的瀏覽器在訪問前總是會詢問用戶是否允許。
獲取用戶地理的途徑有:
1 if(navigator.geolocation){ 2 navigator.geolocation.getCurrentPosition(showPosition,showError); 3 }else{ 4 alert('該瀏覽器不支持地理位置!'); 5 } 6 7 function showPosition(position){ 8 var lat=position.coords.latitude; 9 var lng=position.coords.longitude;
alert('緯度'+lat+","+"經度"+lng);
11 } 12 function showError(error){ 13 switch(error.code) 14 { 15 case error.PERMISSION_DENIED: 16 alert("用戶拒絕對獲取地理位置的請求。") 17 break; 18 case error.POSITION_UNAVAILABLE: 19 alert("位置信息是不可用的。")
20 break; 21 case error.TIMEOUT: 22 alert("請求用戶地理位置超時。")
23 break; 24 case error.UNKNOWN_ERROR: 25 alert("未知錯誤。")
26 break; 27 }
}
支持地理位置的API的瀏覽器會定義navigator.geolocation。此屬性擁有三個方法的對象:
navigator.geolocation.getCurrentPosition() 獲取用戶當前位置
navigator.geolocation.watchPosition() 獲取並不斷監視當前位置，一當有更改就會觸發指定函數
navigator.geolocation.clearWatch() 停止監聽用戶位置
上面的代碼可以知道，如果用戶設備支持地理定位，則運行 getCurrentPosition() 方法。如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象，getCurrentPosition() 方法的第二個參數showError用於處理錯誤，它規定當獲取用戶位置失敗時運行的函數。其實，除了前兩個參數之外getCurrentPosition()還接受第三個參數，該參數為一個配置對象。該對象的屬性指定是否需要高精度的位置信息，該位置的過期時間，以及系統在多長范圍內獲取位置信息。
1 opts={ 2 2 enableHightAccuracy:false,//獲取高精度位置 3 3 maximumAge:30000, //過期時間 4 4 timeout:15000 //15s的等待時間 5 5 } 6 6 if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError,opts); 7 7 }else{ 8 8 alert('該瀏覽器不支持地理位置!'); 9 9 } 10 10 11 11 function showPosition(position){ 12 12 } 13 13 function showError(error){ 14 14 15 15 }
接着就是在地圖上顯示坐標位置(百度地圖):
在使用百度地圖前，你必須先獲取一下秘鑰，點擊這里
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>Hello, World</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vjxRk3m3YYQ4uglexlrOxEVwGc2Nw6kF"> 7 <style type="text/css"> 8 html{height:100%} 9 body{height:100%;margin:0px;padding:0px} 10 #container{height:100%} 11 </style>
</head> 12 <body>
<div id='container'></div> 13 <script> 14 var lat,lng; 15 if(navigator.geolocation){ 16 navigator.geolocation.getCurrentPosition(showPosition); 17 }else{ 18 document.getElementById("container").innerHTML="該瀏覽器不支持地理位置！"; 19 } 20 function showPosition(position){ 21 lat=position.coords.latitude; 22 lng=position.coords.longitude; 23 alert("緯度"+latlonX+"<br/>經度"+latlonY); 24 } 25 var map = new BMap.Map("container"); // 創建地圖實例 26 var point = new BMap.Point(lat,lng); // 創建點坐標 27 map.centerAndZoom(point, 15); // 初始化地圖，設置中心點坐標和地圖級別 28 </script> 29 </body> 30 </html>
其中,位於BMap命名空間下的Map類表示地圖，通過new操作符可以創建一個地圖實例。其參數可以是元素id也可以是元素對象(這里是container)。
地圖添加到container容器里，所以要確保container容器在頁面有寬和高，所以設置了style，如上，ak是你申請的秘鑰。