HTML5 geolocation API技術(地理定位技術),應用請求用戶共享位置,提供位置相關的信息;或者是構建計算步行(跑步)路程的應用程序,在運動中啓動記錄功能;還有就是基於GPS導航的社交網絡應用。目前Geolocation API中有兩種類型的定位請求函數:單次定位請求和重複性的位置更新請求。javascript
在訪問位置信息前,瀏覽器都會詢問用戶是否共享其位置信息,以 Chrome 瀏覽器爲例,若是您容許 Chrome 瀏覽器與網站共享您的位置,Chrome 瀏覽器會向 Google 位置服務發送本地網絡信息,估計您所在的位置。而後,瀏覽器會與請求使用您位置的網站共享您的位置。html
返回的位置信息,是經過支持HTML5地理定位功能的底層設備(筆記本電腦或手機)提供給瀏覽器的。位置信息由經緯度和一些其餘元數據組成(取決於瀏覽器所在的硬件設備,包括還把、行駛方向和速度等),利用這些信息,能夠構建位置感知類應用程序。html5
經緯度座標能夠使用十進制(39.1722)或者是DMS(角度,39°10′20″)格式。java
位置信息從何而來git
Geolocation API不能保證設備返回數據的準確性,設備能夠使用下列數據源:api
IP地址和三維座標(GPS全球定位系統,WiFi的MAC地址,GSM或CDMA手機的ID和用戶自定義數據)瀏覽器
IP地址,若是用戶的IP地址是由ISP提供的,其位置每每就是由服務供應商的物理地址決定,不精確,並且在服務器端運算代價大。服務器
GPS地理定位數據,經過手機運行在地球周圍多個GPS衛星的信號提供,提供很是準確的定位結果,可是定位時間長,不適宜須要快速響應的應用程序。網絡
WIFI地理定位數據,是經過三角計算得出的,用戶當前位置到已知的多個WIFI接入點的距離,可在室內使用,簡單快捷。app
手機地理定位數據,經過用戶到一些基站的三角距離肯定,一般基於WIFI和GPS的地理定位信息結合使用。
重要提示,應用程序不能直接訪問設備,它只能請求瀏覽器來表明他訪問設備。
瀏覽器支持檢查
當瀏覽器不支持時,能夠提供一些替代文本,以提示用戶升級瀏覽器或安裝插件來加強現有瀏覽器功能:
(function loadDemo(){ if(navigator.geolocation){ document.getElementById("support").innerHTML = "geolocation support"; }else{ document.getElementById("support").innerHTML = "geolocation not supporet"; } })();
座標還有一些特性,不能保證瀏覽器都爲其提供支持,但若是不支持就會返回null(例如若是使用筆記本電腦,就沒法訪問用戶位置還把高度altitude、行進方向heading、地面速度speed)
demo
window.onload=function(){ var options={ enableHighAccuracy:true, maximunAge:1000, timeout:45000 }; if(window.navigator.geolocation){ navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options); }else{ alert("你的瀏覽器不支持定位!"); } } function successCallback(position){ var output=""; output +="Your position has bean located . \r\n"; output+=" Latitude:"+position.coords.latitude+" "; output+=" Longitude:"+position.coords.longitude+" "; output+=" Accuracy :"+position.coords.accuracy +" meters"; if(position.coords.latitude){ output+=" Accuracy :"+position.coords.altitudeAccuracy +" meters"; } if(position.coords.heading){ output+=" Heading :"+position.coords.Heading +" meters"; } if(position.coords.speed){ output+=" Speed :"+position.coords.Speed +" m/s"; } output+=" Time of Position "+position.timestamp +" m/s"; alert(output); }
function errorCallback(error){ switch(error.code){ case error.PERMISSION_DENIED: alert("you have denied access to your position ."); break; case error.POSITION_UNAVAILABLE: alert("there was a problem getting yout position ."); break; case error.TIMEOUT: alert("The application has timed out attempting to get your location ."); break; } }
Geolocation API存在於navigator對象中,只包含3個方法:
一、getCurrentPosition
二、watchPosition
三、clearWatch
核心函數的調用
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);
successCallback指明位置數據可用時應調用的函數,由於像獲取位置數據這樣的操做可能須要比較長的時間才能完成。沒有用戶但願在檢索位置時瀏覽器所鎖定,也沒有開發人員但願它們的程序無限期暫停。successCallback是收到實際位置信息並進行處理的地方。
errorCallback位置信息請求極可能由於一些不可控因素失敗,參數是可選的,不過建議選用。提供一個用於跟用戶解釋或者提示其重試的函數。
options對象能夠調整html5 geolocation服務的數據收集方式。
option
enableHighAccuracy:通知瀏覽器啓用html5服務高精確度模式
maximunAge:表示瀏覽器從新計算位置的時間間隔,以ms爲單位的值,默認爲ns爲單位的值,每次請求必須當即計算位置。
timeout:告訴瀏覽器計算當前位置所容許的最長時間,若是超過這個時間沒有完成計算,就會調用錯誤處理程序,默認爲infinity無限大。
對於錯誤編號
PERMISSION_DENIED:用戶選擇拒絕瀏覽器獲取其位置信息
POSITION_UNAVAILABLE:嘗試獲取用戶位置數據,但失敗
TIMEOUT:設置可選的timeout值,會嘗試肯定用戶位置的過程超時。
coords屬性有7個值,包含上面用到的緯度、經度
一、accuracy 準確角
二、altitude 海拔高度
三、altitudeAcuracy 海拔高度的精確度
四、heading 行進方向
五、speed 地面的速度
百度地圖結合HTML5 Geolocation API
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <title>百度地圖</title> 6 <script type='text/javascript' src='http://api.map.baidu.com/api?v=1.3'></script> 7 <script type='text/javascript'> 8 9 function getLocation(){ 10 if(navigator.geolocation){ 11 navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy:true, maximumAge:1000}); 12 }else{ 13 alert('您的瀏覽器不支持使用HTML 5來獲取地理位置服務'); 14 } 15 } 16 17 function showMap(value){ 18 var longitude = value.coords.longitude; 19 var latitude = value.coords.latitude; 20 var map = new BMap.Map('map'); 21 var point = new BMap.Point(longitude, latitude); // 建立點座標 22 map.centerAndZoom(point, 15); 23 var marker = new BMap.Marker(new BMap.Point(longitude, latitude)); // 建立標註 24 map.addOverlay(marker); // 將標註添加到地圖中 25 } 26 27 function handleError(value){ 28 switch(value.code){ 29 case 1: 30 alert('位置服務被拒絕'); 31 break; 32 case 2: 33 alert('暫時獲取不到位置信息'); 34 break; 35 case 3: 36 alert('獲取信息超時'); 37 break; 38 case 4: 39 alert('未知錯誤'); 40 break; 41 } 42 } 43 44 function init(){ 45 getLocation(); 46 } 47 48 window.onload = init; 49 50 </script> 51 </head> 52 53 <body> 54 <div id='map' style='width:600px;height:600px;'></div> 55 </body> 56 </html>