HTML實現位置感知

地理定位API如何確定你的位置:
    所有瀏覽器(不論是設備瀏覽器,還是桌面瀏覽器)會使用以下幾種不同的方法來確定位置,有的不那麼精確,有的則很精確。

1、IP地址
    基於IP地址的位置信息使用一個外部數據庫將IP地址映射到一個物理位置。這種方法的好處是任何地方都可以使用。不過,IP地址通常會解析爲其他位置,而不是你的具體位置,比如你的ISP本地分局的位置,而不是你的具體位置。可以認爲這種方法在城市級(甚至有時在街區級)很可靠。

2、GPS
    很多較新的移動設備都支持全球定位系統(Global Positioning System),它能利用衛星提供極其精確的位置信息。不過,要使用GPS,你的設備必須能看到天空,而且肯呢過需要花很長時間才能得到位置。另外,GPS還很耗電。

3、蜂窩電話
    蜂窩電話三角定位可以根據你與一個或多個蜂窩電話基站的舉例來確定你的位置(基站越多,位置就越準確)。這種方法可能相當精確,在室內也能用,而且它也比GPS快得多。不過,它的缺點也很明顯,如果你的位置很偏僻,周圍只有一個蜂窩基站,位置可能就不那麼精確了。

4、WiFi
    WiFi定位使用一個或多個WiFi接入點完成三角定位。這種方法可能很精確,而且,速度也很快。但這要求你想對處於靜態。

通過瀏覽器獲取位置的代碼:

HTML代碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Where am I?</title>
        <script src="myLoc.js"></script>
    </head>
    <body>
        <!--這個div用來輸出位置信息-->
        <div id="location">
            Your location will go here.
        </div>
    </body>
</html>

myLoc.js文件:

//一旦瀏覽器加載頁面,將調用函數getMyLocation。
window.onload = getMyLocation;
function getMyLocation(){
    //利用這個檢查來確保瀏覽器支持地理定位API。如果navigator.geolocation對象存在,說明瀏覽器支持這個API。
    if (navigator.geolocation) {
        //如果瀏覽器支持地理定位API,則調用getCurrentPosition方法,並傳入一個調用成功處理函數displayLocation以及一個調用失敗處理函數displayError。  
    navigator.geolocation.getCurrentPosition(displayLocation,displayError);
    } else{
        //如果瀏覽器不支持地理定位,就向用戶彈出一個提醒。
        alert("Oops, no geolocation support");
    }
}
//調用成功處理函數,瀏覽器得到一個位置時就會調用這個函數。
//向displayLocation傳入一個位置,其中包含位置的緯度和經度。
function displayLocation(position){
    //從position.coords對象得到位置的緯度和經度
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    //將位置信息顯示在瀏覽器中
    var div = document.getElementById("location");
    div.innerHTML = "You are at Latitude: "+latitude+", Longitude: "+longitude;
}
//當地理定位找不到位置時調用函數displayError,地理定位API會向它傳入一個錯誤。
//error對象有一個code屬性,其中包含一個0—3的數。這是用javascript爲各個錯誤碼關聯一個錯誤消息的好辦法。
function displayError(error){
    //創建一個對象,包含4個屬性,分別名爲0—3。這些屬性是串,包含了我們希望與各個錯誤碼關聯的錯誤消息。
    var errorTypes = {
        0: "Unknown error",//“全包型”錯誤,如果其他錯誤都不適合就會返回這個錯誤。
        1: "Permission denied by user",//用戶拒絕了使用位置信息的請求。
        2: "Position is not available",//瀏覽器嘗試過,但沒能得到你的位置信息。
        3: "Request timed out"//地理定位有一個內部超時設置,如果超出了這個時間限制仍然沒能確定位置,就會導致這個錯誤。
    };
    //使用error.code屬性,將一個錯誤信息串賦給一個新變量errorMessage
    var errorMessage = errorTypes[error.code];
    //對於錯誤0和2,有時error.message屬性中會有一些額外的信息。所以把這些信息增加到errorMessage串。
    if (error.code == 0||error.code == 2) {
        errorMessage = errorMessage+" "+error.message;
    }
    //將這個消息增加到頁面,讓用戶知道
    var div = document.getElementById("location");
    div.innerHTML = errorMessage;
}

getCurrentPosition方法:

getCurrentPosition(successHandler,errorHandler,options)

它有3個參數,其中errorHandler與options可選。

  • successHandler是一個函數,如果瀏覽器能夠成功確定位置,就調用此函數。
  • errorHandler是另外一個函數,如果出了問題,瀏覽器無法確定位置,則會調用這個函數。
  • options參數允許定製地理定位方法。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章