HTML5的Geolocation地理位置定位API使用教程

Scott 發(fā)布時(shí)間：2016-05-12 11:33:27 作者：liuhe688

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶位置的功能,借助這個(gè)特性能夠開發(fā)基于位置信息的應(yīng)用,今天這篇文章就向大家介紹一下HTML5的Geolocation地理位置定位API使用教程.

在手持設(shè)備如此普遍的今天，位置信息對(duì)于應(yīng)用程序來講是極其重要的，打車應(yīng)用可以根據(jù)用戶的位置信息呼叫附近的車輛，團(tuán)購軟件可以根據(jù)當(dāng)前的位置推薦附近的影院和美食，地圖應(yīng)用可以根據(jù)用戶的位置快速規(guī)劃到目的地的路線，可以說位置信息對(duì)于移動(dòng)應(yīng)用是不可或缺的。
為了順應(yīng)這個(gè)潮流，HTML5為我們提供了Geolocation庫，有了它我們就能夠在Web應(yīng)用中輕而易舉地實(shí)現(xiàn)上述這些功能。那么今天我就為大家介紹一下這個(gè)庫的使用。

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

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

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

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

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

可以看到，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ù)，我們的打印信息如下：
2016512112616703.jpg (924×256)

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

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