HTML5 Geolocation API

時間 2019-11-13

標籤 html5 html geolocation api 欄目 HTML5 简体版

原文原文鏈接

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。