HTML5 Geolocation API

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>
相關文章
相關標籤/搜索