季耀君

摘要：HTML5新功能和新特性，為推動(dòng)跨平臺(tái)Web應(yīng)用服務(wù)增添了新鮮活力。地理定位是HTML5的重要特性，HTML5定義了一系列API編程接口和規(guī)范，能夠?yàn)橛脩籼峁┤娴牡乩矶ㄎ环?wù)。通過(guò)闡述HTML5地理位置定位技術(shù)原理，利用HTML5提供的Geolocation、getCurrentPosition、Watchposition 3個(gè)API實(shí)現(xiàn)了用戶位置的獲取、定位與持續(xù)追蹤，通過(guò)HTML5和Baidu Map實(shí)現(xiàn)位置信息的交互，說(shuō)明HTML5地理定位技術(shù)的實(shí)現(xiàn)過(guò)程。

關(guān)鍵詞：Html5;跨平臺(tái);地理定位技術(shù);Baidu Map API;Google Map API

中圖分類號(hào)：TP393文獻(xiàn)標(biāo)志碼：A

文章編號(hào)：2095-5383（2018）04-0019-04

HTML5規(guī)范了在Web瀏覽器中使用JavaScript的地理定位Geolocation API，使得大多數(shù)Web用戶都可以在桌面和移動(dòng)環(huán)境中使用地理位置定位服務(wù)。Geolocation API定義了只與主機(jī)設(shè)備相關(guān)高層次的位置信息接口，比如緯度和經(jīng)度，API本身是不可知的基礎(chǔ)位置信息源。位置信息的常見來(lái)源包括IP、GPS、RFID、GSM / CDMA cell IDs等。API的設(shè)計(jì)是為了允許一次性位置請(qǐng)求和重復(fù)位置的更新及顯式查詢緩存位置的能力來(lái)保證API返回設(shè)備的實(shí)際位置，位置信息用經(jīng)緯度坐標(biāo)表示。

1地理定位技術(shù)的應(yīng)用現(xiàn)狀

近年來(lái)，地理定位技術(shù)成為網(wǎng)絡(luò)技術(shù)熱門話題，獲取用戶位置對(duì)于建立更好的用戶體驗(yàn)非常關(guān)鍵。之前檢索用戶位置信息，往往是通過(guò)用戶設(shè)備的IP地址對(duì)其位置進(jìn)行粗略估計(jì)，而現(xiàn)在能使用地理定位API的方式降低操作難度，提升定位的準(zhǔn)確性[1]。地理位置Geolocation是 HTML5 的重要特性之一，提供了確定用戶位置的功能，借助這個(gè)特性能開發(fā)出基于位置信息的應(yīng)用。例如，通過(guò)HTML5地理定位技術(shù)，電子商務(wù)公司可以進(jìn)行運(yùn)輸成本估算，通知客戶產(chǎn)品運(yùn)輸實(shí)時(shí)情況;新聞?wù)军c(diǎn)可以提供本地新聞內(nèi)容推送和天氣報(bào)告;商店或餐館可精確地為附近用戶提供優(yōu)惠活動(dòng)和送貨上門服務(wù);電影網(wǎng)站可列出用戶附近劇院正在播放的電影等。除商業(yè)之外，HTML5地理定位技術(shù)在大眾生活服務(wù)、社交、休閑娛樂(lè)方面應(yīng)用也十分廣泛。

2HTML5地理位置定位技術(shù)原理

HTML5地理位置定位技術(shù)原理包括：實(shí)現(xiàn)基于瀏覽器（無(wú)需后端支持）獲取用戶的地理位置技術(shù);精確定位用戶的地理位置（精度最高達(dá)10m之內(nèi)，依賴設(shè)備）;持續(xù)追蹤用戶的地理位置;與Google Map或Baidu Map交互呈現(xiàn)位置信息。本文是基于Baidu Map實(shí)現(xiàn)和HTML5交互位置信息。利用HTML5提供的Geolocation、getCurrentPosition、Watchposition 3個(gè)API實(shí)現(xiàn)用戶位置的獲取、定位與持續(xù)追蹤，其具體實(shí)現(xiàn)如下。

21地理位置定位API

地理位置定位Geolocation API 提供確定瀏覽器用戶所在位置的功能，并將地理位置信息發(fā)送給用戶信任的站點(diǎn)。例如，在百度地圖搜索附近的銀行，首先會(huì)根據(jù)用戶所在的位置來(lái)定位，在此基礎(chǔ)之上才能進(jìn)行后續(xù)操作。Geolocation API位于navigator對(duì)象中主要有g(shù)etCurrentPosition（）、watchPosition（）、clearWatch（）3種函數(shù)成員[2]。

22getCurrentPosition（）于得到客戶的地點(diǎn)信息

在函數(shù)成員getCurrentPosition（successCallback，errorCallback，{Geolocation 選項(xiàng)}）中，共有3個(gè)參數(shù)，第1個(gè)是成功的回調(diào)函數(shù)（successCallback），第2個(gè)是失敗的回調(diào)函數(shù)（errorCallback），第3個(gè)是強(qiáng)調(diào)getCurrentPosition額外的選項(xiàng)。

1）successCallback指用戶允許共享獲取當(dāng)前位置的回調(diào)函數(shù)，有的瀏覽器需要經(jīng)過(guò)用戶允許才可以實(shí)現(xiàn)位置共享，如果用戶允許且成功獲取位置信息的情況下才會(huì)執(zhí)行successCallback回調(diào)函數(shù)，同時(shí)successCallback回調(diào)函數(shù)會(huì)接受一個(gè)參數(shù)用來(lái)表示獲取的地理位置信息，當(dāng)前參數(shù)里會(huì)包含一個(gè)屬性coords，表示用戶地理位置的信息參數(shù)。coords下還具備幾個(gè)子屬性，用來(lái)表示用戶設(shè)備所在位置的地理信息數(shù)據(jù)，包括經(jīng)緯度、高度（altitude，相對(duì)于海平面即海拔）、速度（speed）等。

2）errorCallback指地理定位失敗的回調(diào)函數(shù)，主要用來(lái)處理錯(cuò)誤，可能是用戶不允許瀏覽器使用定位服務(wù)，也可能是用戶允許情況下獲取地理位置信息失敗。這兩種情況下會(huì)執(zhí)行errorCallback回調(diào)函數(shù)。該函數(shù)也包含一個(gè)參數(shù)，通常定義為“error”，當(dāng)然，可以根據(jù)需求靈活改變參數(shù)名稱，其中主要包含的錯(cuò)誤信息及錯(cuò)誤代號(hào)等相關(guān)內(nèi)容[3]，error里面的屬性主要有：

Message：用來(lái)說(shuō)明具體的錯(cuò)誤是什么

CODE：錯(cuò)誤代號(hào)，適用于精確匹配錯(cuò)誤時(shí)使用，通過(guò)其包含不同的錯(cuò)誤代號(hào)來(lái)提示給用戶不同內(nèi)容

PERMISSION_DENIED：用戶不允許使用地理定位

POSITION_UNAVILABLE：允許使用地理定位前提下卻無(wú)法獲取用戶當(dāng)前位置

TIMEOUT：操作超時(shí)

3）Geolocation選項(xiàng)定義了獲取用戶地理位置的某些輔助功能屬性，每種屬性實(shí)現(xiàn)的功能也不一樣，例如，是否啟用高精度匹配，是否定義超時(shí)時(shí)間等。這些屬性的含義為：

enableHighAccuracy：表示瀏覽器獲得地理位置有著最高的精度等級(jí)，其值為true或false，不明確定義時(shí)值是false?？赡芤恍┰O(shè)備不指定高精度獲取位置可能會(huì)產(chǎn)生位置偏差，所以建議盡可能將這一屬性設(shè)置為true，如果將其屬性設(shè)置為true得到所需地理信息的時(shí)間就會(huì)相對(duì)較長(zhǎng)。

Timeout確立得到地理位置的時(shí)間域值，不定義表示不限時(shí)。設(shè)置這一屬性，在規(guī)定的時(shí)間內(nèi)未成功獲取用戶地理位置將產(chǎn)生錯(cuò)誤，即調(diào)用errorCallback回調(diào)函數(shù)的時(shí)間，單位為毫秒（ms）。

maximumAge——最大存活周期，在循環(huán)得到地點(diǎn)信息相關(guān)數(shù)據(jù)時(shí)，這個(gè)參數(shù)確立間隔多長(zhǎng)時(shí)間獲取一次地理信息數(shù)據(jù)。不指定時(shí)值為0，表明瀏覽器立即計(jì)算得到新的地理數(shù)據(jù)信息。

2.3Watchposition（）持續(xù)追蹤用戶位置

Watchposition（）像一個(gè)位置追蹤器，通常與Clearwatch（）一起來(lái)使用，類似于JavaScript中setInteval和clearInteval的工作方式。調(diào)用Watchposition（） 的方法：var watch=navigator。watchPosition（success_callback、error_callback選項(xiàng)），其中包含的內(nèi)容依然是uccess_callback、error_callback和Geolocation選項(xiàng)，也就是說(shuō)getCurrentPosition中的參數(shù)拿到Watchposition（） 中依然可以使用，需要注意的是需要將其保存之后才可以使用Clearwatch（）。

2.4Clearwatch（）停止獲取用戶位置

Clearwatch（）清除位置追蹤，它的語(yǔ)法規(guī)范就是Clearwatch（watch），使用時(shí)將之前保存的watch對(duì)象代入即可。

3HTML5地理定位技術(shù)的實(shí)現(xiàn)過(guò)程

隨著位置服務(wù)在大眾的生活、社交、休閑娛樂(lè)方面的深入應(yīng)用，HTML5定位技術(shù)越來(lái)越多地嵌入到電子商務(wù)網(wǎng)站、新聞?wù)军c(diǎn)、商店、餐館或電影網(wǎng)站等需要獲取用戶位置的平臺(tái)以實(shí)現(xiàn)商業(yè)利益的最大化。而在這些網(wǎng)站中，用戶主要利用百度地圖、谷歌地圖和HTML5實(shí)現(xiàn)交互來(lái)獲取的用戶的位置、定位以及持續(xù)追蹤。但是谷歌地圖由于服務(wù)原因無(wú)法直接使用，因此本文的HTML5地理定位技術(shù)實(shí)現(xiàn)過(guò)程借助于百度地圖。百度地圖提供了完整的地圖信息策略，可以根據(jù)用戶指定的地理位置信息提供定位服務(wù)。在操作之前需要申請(qǐng)百度秘鑰（AK）：http：//developer.baidu.com/map，通過(guò)百度地圖相關(guān)js文件導(dǎo)入頁(yè)面當(dāng)中，再配上相應(yīng)的AK就可以使用百度地圖了[4]。

3.1如何使用百度地圖API

1）百度地圖對(duì)象

要在頁(yè)面顯示百度地圖，第一步用div在頁(yè)面中創(chuàng)建容器，進(jìn)行ID賦值，可將百度地圖顯示在容器中。百度地圖對(duì)象叫做BMap（），使用時(shí)先創(chuàng)建BMap（）對(duì)象，再調(diào)用其Map（）函數(shù)進(jìn)行地圖初始化操作。Map（）函數(shù)傳遞頁(yè)面顯示百度地圖的元素ID作為參數(shù)，對(duì)地圖進(jìn)行初始化顯示操作。

2）定位顯示城市及縮放比例

在定位顯示城市及縮放比例函數(shù)centerAnd Zoom（point/cityName，level）中，“center”表示中心，“Zoom”表示縮放比例，其中“point/cityName”參數(shù)說(shuō)明百度地圖使用是比較靈活的，可以根據(jù)傳遞的經(jīng)緯度或城市名稱來(lái)進(jìn)行定位，“l(fā)evel”指縮放比例，可以根據(jù)實(shí)際來(lái)自行設(shè)置。point可以通過(guò)new BMap.point（經(jīng)度，緯度）函數(shù)進(jìn)行說(shuō)明定義，即point=new BMap.point函數(shù)傳遞經(jīng)度和緯度兩個(gè)值。

3.2獲取設(shè)備地理位置

1）獲取百度的Geolocation對(duì)象

通過(guò)getCurrentPosition事件來(lái)添加回調(diào)函數(shù)，并通過(guò)position參數(shù)獲取當(dāng)前地理位置信息十分方便。具體來(lái)說(shuō)，在代碼geolocation.getCurrentPosition（function（position）{}）;中的function（）匿名函數(shù)作為回調(diào)函數(shù)，position參數(shù)作為用戶設(shè)備當(dāng)前位置信息，也就是說(shuō)當(dāng)百度地圖獲取到用戶地理位置后會(huì)將位置信息賦值于position參數(shù)當(dāng)中[5]。另一方面，我們可以通過(guò)geolocation的getStatus（）來(lái)判斷地理位置獲取成功或失敗的原因。

2）position參數(shù)

position參數(shù)主要功能是用來(lái)獲取當(dāng)前設(shè)備的地理位置，共有如下3個(gè)重要屬性：

Position.point：當(dāng)前地理坐標(biāo)對(duì)象

Position.point.lng：當(dāng)前位置的經(jīng)度信息

Position.point.lat：當(dāng)前位置的緯度信息

3）創(chuàng)建坐標(biāo)

創(chuàng)建標(biāo)點(diǎn)的作用是顯示用戶所在位置，我們可以通過(guò)百度地圖API中的marker函數(shù)來(lái)完成，即Var marker=new BMap.Marker（point），其中point以經(jīng)緯點(diǎn)作為參數(shù)，將坐標(biāo)點(diǎn)添加到地圖上，其函數(shù)為map.addOverlay（marker），用來(lái)接收marker作為參數(shù)，可將創(chuàng)建好的坐標(biāo)點(diǎn)放到地圖上[6]，并通過(guò)map.panTo（point） 函數(shù)將地圖中心移動(dòng)到指定標(biāo)點(diǎn)上。

4結(jié)束語(yǔ)

隨著移動(dòng)通信的發(fā)展和移動(dòng)智

能終端設(shè)備的普及，用戶對(duì)地理位置跨平臺(tái)、跨終端服務(wù)的需求愈加旺盛。HTML5的跨平臺(tái)地理位置定位技術(shù)在用戶允許的前提下識(shí)別用戶位置并且可以分享給他人，優(yōu)勢(shì)在于通過(guò)瀏覽器能避免不同平臺(tái)和操作系統(tǒng)的限制，且用戶無(wú)需進(jìn)行任何下載操作，適應(yīng)移動(dòng)時(shí)代的發(fā)展趨勢(shì)。參考文獻(xiàn)：[1]黃永慧，陳程凱.HTML5在移動(dòng)應(yīng)用開發(fā)上的應(yīng)用前景[J].計(jì)算機(jī)技術(shù)與發(fā)展，2013，23（7）：207210.

[2]龔麗.HTML5中的地理定位技術(shù)探究[J].軟件導(dǎo)刊，2015，14（11）：3032.

[3]連政.基于HTML5技術(shù)的移動(dòng)Web前端設(shè)計(jì)與開發(fā)[D].杭州：浙江工業(yè)大學(xué)，2014.

[4]魯立，劉楨.基于HTML5地理定位技術(shù)的移動(dòng)終端導(dǎo)航設(shè)計(jì)[J].電子設(shè)計(jì)工程，2012，20（22）：120122.

[5]劉天寅.HTML5與未來(lái)的WEB應(yīng)用平臺(tái)[J].陰山學(xué)刊（自然科學(xué)），2010，24（2）：8690.

[6]胡晶.基于HTML5的Web移動(dòng)應(yīng)用開發(fā)研究[J].工業(yè)控制計(jì)算機(jī)，2014，27（10）：8081.