HTML5中Geolocation地理位置定位API怎么用-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)HTML5中Geolocation地理位置定位API怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

太子河網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,太子河網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為太子河數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的太子河做網(wǎng)站的公司定做！

基本用法
首先，我們可以從瀏覽器的navigator對(duì)象中通過(guò)geolocation屬性獲取到一個(gè)Geolocation的實(shí)例，如下圖所示：

圖中我們可以看到，Geolocation類有三個(gè)常用的方法，他們分別是：

1.getCurrentPosition: 用于獲取當(dāng)前的位置信息
2.watchPosition: 用于在位置變化時(shí)實(shí)時(shí)監(jiān)測(cè)位置信息
3.clearWatch: 取消正在運(yùn)行的監(jiān)測(cè)操作
我們先來(lái)看一下getCurrentPosition方法，下面是它的函數(shù)簽名：

navigator.geolocation.getCurrentPosition(success[, error[, options]]);

第一個(gè)參數(shù)用于指定一個(gè)成功后的處理函數(shù)，第二參數(shù)用于指定一個(gè)錯(cuò)誤處理函數(shù)，第三個(gè)用于給函數(shù)提供一些可選的配置項(xiàng)?，F(xiàn)在我們就來(lái)調(diào)用這個(gè)函數(shù)：

navigator.geolocation.getCurrentPosition(function(position) {   
    //success handler code goes here   
    console.log(position);   
}, function(error) {   
    //error handler code goes here   
    console.log(error);   
}, {//options   
    enableHighAccuracy: true,   
    timeout: 5000,   
    maximumAge: 0   
});

一旦這段代碼運(yùn)行起來(lái)，瀏覽器窗口就會(huì)彈出一個(gè)確認(rèn)框，請(qǐng)求用戶進(jìn)行位置定位的授權(quán)：

如果我們點(diǎn)擊Allow允許該站點(diǎn)進(jìn)行位置定位，該函數(shù)就開(kāi)始從設(shè)備獲取位置信息，并觸發(fā)成功的回調(diào)函數(shù)，并將位置信息對(duì)象傳入回調(diào)函數(shù)中，上面的代碼中我們?cè)诳刂婆_(tái)打印了position，控制臺(tái)信息如下：

可以看到，position實(shí)際上是一個(gè)Geoposition對(duì)象的實(shí)例，其中包括coords和timestamp兩個(gè)屬性，后者是一個(gè)時(shí)間戳，記錄獲取到位置時(shí)的時(shí)間，coords里面包含了很多位置有關(guān)的信息：

accuracy: 位置的精確度范圍，單位為米
altitude: 海拔高度，單位為米，如果設(shè)備不支持高度感應(yīng)，則該屬性為null
altitudeAccuracy: 海拔精確度范圍，單位為米，如果設(shè)備不支持高度感應(yīng)，則該屬性為null
speed: 設(shè)備移動(dòng)的速度，單位為米/秒，如果設(shè)備不能提供速度信息，該屬性為null
heading: 當(dāng)前移動(dòng)的方向，以數(shù)字表示，單位為角度，以順時(shí)針[0, 360)度表示偏離正北方的角度，0表示正北方向，90度表示正東方向，180度表示正南方向，270表示正西方向；需要注意的是，如果speed為0，則heading會(huì)是NaN，如果設(shè)備不能提供方向信息，則該屬性為null
longitude: 經(jīng)度信息
latitude: 緯度信息
我們?cè)诔晒Φ幕卣{(diào)函數(shù)中接收到這些信息，可以根據(jù)實(shí)際的設(shè)備和應(yīng)用場(chǎng)景獲取相應(yīng)的信息，做進(jìn)一步的操作。
回到剛才的確認(rèn)框，如果我們點(diǎn)擊了Block阻止該站點(diǎn)獲取當(dāng)前的位置信息，代碼就會(huì)授權(quán)失敗，相應(yīng)地，失敗的回調(diào)函數(shù)就會(huì)被觸發(fā)，error錯(cuò)誤對(duì)象也會(huì)被傳入回調(diào)函數(shù)，我們的打印信息如下：

可以看到error參數(shù)是一個(gè)PositionError實(shí)例，包含一個(gè)錯(cuò)誤碼code和message，分別表示錯(cuò)誤的類型和錯(cuò)誤提示消息，其中錯(cuò)誤碼有以下幾種：

1: PERMISSION_DENIED - 用戶拒絕了授權(quán)請(qǐng)求，授權(quán)失敗
2: POSITION_UNAVAILABLE - 因?yàn)橐恍﹥?nèi)部錯(cuò)誤，導(dǎo)致位置獲取失敗
3: TIMEOUT - 超時(shí)，超過(guò)了配置的超時(shí)時(shí)間后還未獲取到位置信息
上面就是失敗的回調(diào)函數(shù)，一般獲取位置出現(xiàn)錯(cuò)誤時(shí)，我們都要及時(shí)捕獲，并做相應(yīng)的處理操作，以獲取好的用戶體驗(yàn)，這一點(diǎn)很重要。
在上面的調(diào)用中，我們還傳入了第三個(gè)參數(shù)，一個(gè)簡(jiǎn)單的對(duì)象，里面包含了幾個(gè)配置信息，它們都是用來(lái)配置函數(shù)運(yùn)行參數(shù)的：

enableHighAccuracy: 默認(rèn)值為false，如果指定為true，則表示在設(shè)備支持的情況下，盡可能獲取高精準(zhǔn)度的數(shù)據(jù)，但這會(huì)在時(shí)間和電量方面存在一定的消耗
timeout: 用于指定一個(gè)超時(shí)時(shí)間，單位為毫秒，表示在超時(shí)后停止位置獲取的操作，默認(rèn)值是Infinity，表示直到獲取到數(shù)據(jù)后才停止該操作的進(jìn)行
maximumAge: 用于指定一個(gè)緩存位置信息的最長(zhǎng)時(shí)間，在這個(gè)時(shí)間段內(nèi)，獲取位置時(shí)會(huì)從緩存中取，單位為毫秒，默認(rèn)值為0，表示不使用緩存，每次都取新的數(shù)據(jù)
上面是關(guān)于getCurrentPosition方法的介紹，在某些場(chǎng)景下，例如路線導(dǎo)航應(yīng)用，我們需要實(shí)時(shí)地獲取新位置，進(jìn)而為用戶規(guī)劃新的路線，這時(shí)，上面的方法已經(jīng)不能很好的滿足需求了，我們需要使用watchPosition方法：

watchId = navigator.geolocation.watchPosition(success[, error[, options]]);

watchPosition方法的使用方式和getCurrentPosition類似，不同的是，success函數(shù)會(huì)執(zhí)行多次，一旦獲取到新的位置數(shù)據(jù)，success函數(shù)就會(huì)被觸發(fā)，與之相似地，如果連續(xù)獲取新的數(shù)據(jù)失敗時(shí)，error函數(shù)也會(huì)被執(zhí)行多次。
大家或許會(huì)注意到，上面的函數(shù)簽名中，會(huì)返回一個(gè)watchId，它標(biāo)示著當(dāng)前的watch操作，當(dāng)我們位置跟蹤任務(wù)完成后，可以使用clearWatch函數(shù)將這個(gè)watchId清除即可：

navigator.geolocation.clearWatch(watchId);

上面就是Geolocation的常用的三個(gè)API，日常開(kāi)發(fā)中我們可根據(jù)實(shí)際情況選用合適的方法，進(jìn)而獲取用戶的位置信息。
現(xiàn)在大部分瀏覽器都已支持Geolocation了，可是為了兼容低版本的瀏覽器，我們需要判斷它的支持情況：

if ('geolocation' in navigator) {   
  // getting usr's position   
} else {   
  // tips: your position is not available   
}

最后，我們用一個(gè)簡(jiǎn)單的例子來(lái)演示在開(kāi)發(fā)中是如何使用Geolocation的：

var API = {   
    //get recommended data by current longitude and latitude   
    getSurroundingRecommendations: function(longitude, latitude, callback) {   
        //simulate data obtaining from server.   
        setTimeout(function() {   
            var data = [   
                {   
                    //item   
                },   
                {   
                    //item   
                }   
            ];   
            callback(data);   
        }, 500);   
    }   
};   
  
document.addEventListener('DOMContentLoaded', function() {   
    //detect if Geolocation is supported   
    if (!'geolocation' in navigator) {   
        console.log('Geolocation is not supported in your browser');   
        return;   
    }   
  
    var successHandler = function(position) {   
        var coords = position.coords,   
            longitude = coords.longitude,   
            latitude = coords.latitude;   
  
        API.getSurroundingRecommendations(longitude, latitude, function(data) {   
            console.log(data);   
        });   
    },   
    errorHandler = function(error) {   
        console.log(error.code, error.message);   
    },   
    options = {   
        enableHighAccuracy: true,   
        timeout: 5000,   
        maximumAge: 0   
    };   
  
    navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);   
  
}, false);

在上面的代碼中，首先我們定義一個(gè)根據(jù)當(dāng)前位置獲取推薦數(shù)據(jù)的方法，然后在文檔加載完成后，開(kāi)始試圖獲取當(dāng)前位置，并調(diào)研這個(gè)方法，獲取模擬的數(shù)據(jù)，真是開(kāi)發(fā)環(huán)境中，可能會(huì)進(jìn)一步利用返回的數(shù)據(jù)做渲染UI等操作。

網(wǎng)絡(luò)設(shè)備
位置服務(wù)用于估計(jì)您所在位置的本地網(wǎng)絡(luò)信息包括：有關(guān)可見(jiàn) WiFi 接入點(diǎn)的信息（包括信號(hào)強(qiáng)度）、有關(guān)您本地路由器的信息、您計(jì)算機(jī)的 IP 地址。位置服務(wù)的準(zhǔn)確度和覆蓋范圍因位置不同而異。
總的來(lái)說(shuō)，在PC的瀏覽器中 HTML5 的地理位置功能獲取的位置精度不夠高，如果借助這個(gè) HTML5 特性做一個(gè)城市天氣預(yù)報(bào)是綽綽有余，但如果是做一個(gè)地圖應(yīng)用，那誤差還是太大了。不過(guò)，如果是移動(dòng)設(shè)備上的 HTML5 應(yīng)用，可以通過(guò)設(shè)置 enableHighAcuracy 參數(shù)為 true，調(diào)用設(shè)備的 GPS 定位來(lái)獲取高精度的地理位置信息。

可選項(xiàng)
事實(shí)上，上述getCurrentPosition函數(shù)還支持第三個(gè)可選的參數(shù)，是一個(gè) Option Object，一共有三個(gè)選項(xiàng)可以設(shè)定：

var options = {     
    enableHighAccuracy: false,     
    timeout: 5000,     
    maximumAge: 60000     
}

其中timeout是設(shè)定地理位置獲取的超時(shí)時(shí)間（單位為毫秒，用戶選擇允許的時(shí)間不計(jì)算在內(nèi)）；而maximumAge表示允許設(shè)備從緩存中讀取位置，緩存的過(guò)期時(shí)間，單位是毫秒，設(shè)為0來(lái)禁用緩存讀取。如果返回的是緩存中的時(shí)間，會(huì)在timestamp中反映出來(lái)。

關(guān)于“HTML5中Geolocation地理位置定位API怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)頁(yè)題目：HTML5中Geolocation地理位置定位API怎么用-創(chuàng)新互聯(lián)
分享地址：http://bm7419.com/article0/dsegio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站排名、Google、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)