基于百度地圖的HTML5地理定位技術應用實踐

季耀君

摘要：HTML5新功能和新特性，為推動跨平臺Web應用服務增添了新鮮活力。地理定位是HTML5的重要特性，HTML5定義了一系列API編程接口和規(guī)范，能夠為用戶提供全面的地理定位服務。通過闡述HTML5地理位置定位技術原理，利用HTML5提供的Geolocation、getCurrentPosition、Watchposition 3個API實現了用戶位置的獲取、定位與持續(xù)追蹤，通過HTML5和Baidu Map實現位置信息的交互，說明HTML5地理定位技術的實現過程。

關鍵詞：Html5;跨平臺;地理定位技術;Baidu Map API;Google Map API

中圖分類號：TP393文獻標志碼：A

文章編號：2095-5383（2018）04-0019-04

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

1地理定位技術的應用現狀

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

2HTML5地理位置定位技術原理

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

21地理位置定位API

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

22getCurrentPosition（）于得到客戶的地點信息

在函數成員getCurrentPosition（successCallback，errorCallback，{Geolocation 選項}）中，共有3個參數，第1個是成功的回調函數（successCallback），第2個是失敗的回調函數（errorCallback），第3個是強調getCurrentPosition額外的選項。

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

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

Message：用來說明具體的錯誤是什么

CODE：錯誤代號，適用于精確匹配錯誤時使用，通過其包含不同的錯誤代號來提示給用戶不同內容

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

POSITION_UNAVILABLE：允許使用地理定位前提下卻無法獲取用戶當前位置

TIMEOUT：操作超時

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

enableHighAccuracy：表示瀏覽器獲得地理位置有著最高的精度等級，其值為true或false，不明確定義時值是false。可能一些設備不指定高精度獲取位置可能會產生位置偏差，所以建議盡可能將這一屬性設置為true，如果將其屬性設置為true得到所需地理信息的時間就會相對較長。

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

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

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

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

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

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

3HTML5地理定位技術的實現過程

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

3.1如何使用百度地圖API

1）百度地圖對象

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

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

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

3.2獲取設備地理位置

1）獲取百度的Geolocation對象

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

2）position參數

position參數主要功能是用來獲取當前設備的地理位置，共有如下3個重要屬性：

Position.point：當前地理坐標對象

Position.point.lng：當前位置的經度信息

Position.point.lat：當前位置的緯度信息

3）創(chuàng)建坐標

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

4結束語

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

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

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

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

[4]魯立，劉楨.基于HTML5地理定位技術的移動終端導航設計[J].電子設計工程，2012，20（22）：120122.

[5]劉天寅.HTML5與未來的WEB應用平臺[J].陰山學刊（自然科學），2010，24（2）：8690.

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