基于HTML5地理定位技術(shù)的移動終端導(dǎo)航設(shè)計

魯 立， 劉 楨

（1.武漢軟件工程職業(yè)學(xué)院 湖北 武漢 430205；2.武漢中等職業(yè)藝術(shù)學(xué)校 湖北 武漢 430000）

隨著移動通信的發(fā)展，現(xiàn)今使用智能手機(jī)、平板電腦等移動終端的人數(shù)增長迅猛，使用基于移動終端的各類服務(wù)也層出不窮；其中，移動終端地理定位與導(dǎo)航的需求與日俱增，國家基礎(chǔ)地理信息中心的統(tǒng)計數(shù)據(jù)也表明[1]：人們?nèi)粘Ｉ钚畔⒅杏?0%與空間位置有關(guān)，而企業(yè)所使用的信息中有59%的信息與空間位置有關(guān)。因此，移動定位服務(wù)（LBS，Location Based Services）正受到前所未有的關(guān)注，它可以提供導(dǎo)航、個人定位、緊急救援等多種應(yīng)用服務(wù)。

1 HTML5的技術(shù)特點(diǎn)

HTML5就是網(wǎng)頁通用技術(shù)標(biāo)準(zhǔn)的HTML最新版本，與上一代HTML相比，它為開發(fā)者提供了一個完整平臺，不需要借助任何插件。除了最基礎(chǔ)的音頻和視頻以外，它還支持更多交互功能，以及多線程處理等全新特征。正是這些特征，它在網(wǎng)頁上實(shí)現(xiàn)大型程序的復(fù)雜效果成為了可能，它不僅有利于開發(fā)，也有利于維護(hù)。開發(fā)者可以利用這一技術(shù)為各種智能手機(jī)、平板電腦和PC開發(fā)完全兼容的產(chǎn)品，不用專門針對特定硬件或操作系統(tǒng)進(jìn)行修改。

1.1 HTML5使瀏覽器將部分替代操作系統(tǒng)

HTML5具有非常好的通用性，形成了巨大的跨平臺優(yōu)勢，基于HTML5平臺的應(yīng)用可以使用在不同操作系統(tǒng)和機(jī)型之間。隨著移動終端設(shè)備在硬件性能上的提升和瀏覽器效率的提高，基于瀏覽器開發(fā)的應(yīng)用，其運(yùn)行效率和展現(xiàn)效果，將趕上基于操作系統(tǒng)的APP應(yīng)用。HTML 5可以使其編寫的應(yīng)用在各種移動終端平臺和設(shè)備上運(yùn)行，從而避免每一個平臺去開發(fā)一個應(yīng)用，給移動終端用戶創(chuàng)造一致的、通用的用戶體驗(yàn)。

1.2 HTML5將改變移動互聯(lián)應(yīng)用的開發(fā)方法

開發(fā)者能通過使用HTML 5方便地利用原來HTML語言編寫的設(shè)計；同時，HTML 5在與媒體的結(jié)合上十分便利，產(chǎn)品可以具備更高質(zhì)量，實(shí)現(xiàn)大量新增的表現(xiàn)效果。我們利用HTML 5在移動終端設(shè)備上開發(fā)應(yīng)用的最大優(yōu)勢就是可以在網(wǎng)頁上直接調(diào)試和修改，版本更新會更快，更方便，能夠節(jié)省大量的成本。原來基于各種不同操作系統(tǒng)開發(fā)應(yīng)用的方法需要花費(fèi)大量的力氣才能在更新和修復(fù)方面達(dá)到HTML 5的效果。對于移動終端設(shè)備來說，基于HTML 5的Web應(yīng)用則只需打開網(wǎng)頁就可運(yùn)行，不需要下載和安裝各種插件和軟件。

2 幾種基于瀏覽器的地理定位技術(shù)的比較

2.1 使用地理位置詳細(xì)信息的方式

使用JavaScript代碼創(chuàng)建確定用戶地理位置詳細(xì)信息的Web應(yīng)用，這些Web應(yīng)用能夠通過監(jiān)控用戶位置隨時間的移動來提供地理定位與導(dǎo)航功能。

2.2 使用IP的方式

使用IP來實(shí)現(xiàn)對瀏覽器用戶的地理位置進(jìn)行跟蹤定位。利用程序讀取一個數(shù)據(jù)齊全的IP數(shù)據(jù)庫來實(shí)現(xiàn)瀏覽器用戶的定位。但是，通過這種方式得到的位置是不可靠的，因?yàn)镮P數(shù)據(jù)庫中的信息可能是錯誤的、不完整的信息。

2.3 使用HTML5地理定位技術(shù)

使用HTML5的Geolocation API實(shí)現(xiàn)對用戶的地理定位，瀏覽器可能從移動設(shè)備的GPS數(shù)據(jù)或是任意聯(lián)網(wǎng)設(shè)備上的IP地址數(shù)據(jù)等多處獲取數(shù)據(jù)來實(shí)現(xiàn)定位與導(dǎo)航功能。由于HTML5在移動終端設(shè)備上開發(fā)應(yīng)用可以直接在網(wǎng)頁上調(diào)試和修改，版本更新會更快，更方便，能夠節(jié)省大量的成本；同時HTML 5是基于瀏覽網(wǎng)頁的，定位與導(dǎo)航的瀏覽器應(yīng)用不需要再對每一個操作系統(tǒng)平臺進(jìn)行單獨(dú)的應(yīng)用開發(fā)，而且也不需要必須通過下載、安裝等一系列操作才能使用。

3 HTML5地理定位技術(shù)的工作原理

Geolocation API[2]是HTML5中用來確定和保存地理位置信息的對象，Geolocation API可以返回經(jīng)度和緯度坐標(biāo)，這些地理數(shù)據(jù)信息被用來標(biāo)識移動終端設(shè)備的物理位置，從而識別出與這一位置相關(guān)的人。

Geolocation API是JavaScript的navigator全局對象的一個新屬性，navigator對象可以提供關(guān)于用戶的瀏覽器和系統(tǒng)的有用信息，而Geolocation API可以通過IP地址、基于web的數(shù)據(jù)庫、無線網(wǎng)絡(luò)連接，以及三角定位或是GPS數(shù)據(jù)提供用戶的經(jīng)度和緯度。因?yàn)镚eolocation API提供的地理信息源的渠道不同，各種提供的地理數(shù)據(jù)的準(zhǔn)確性也根據(jù)獲取信息的手段不同而發(fā)生變化。相對來說，通過GPS獲取的數(shù)據(jù)是比較準(zhǔn)確的，誤差可以控制在亞米級；通過IP地址獲取的數(shù)據(jù)就不太準(zhǔn)確，可能會獲取錯誤數(shù)據(jù)或空數(shù)據(jù)而導(dǎo)致定位錯誤和無法定位。

HTML5地理定位技術(shù)依賴于 Geolocation API，Geolocation API通過腳本使用Geolocation對象的3個方法來確定用戶位置信息，創(chuàng)建位置對象并將位置信息填充到位置對象來實(shí)現(xiàn)地理定位。Geolocation的3個方法的詳細(xì)分析如下：

3.1 getCurrentPosition（）方法

該方法[3]用來檢索用戶的當(dāng)前位置信息，當(dāng)該方法被腳本調(diào)用時，方法以異步通信的方式來嘗試獲取用戶的移動終端設(shè)備的當(dāng)前位置。這種異步通信可以保證瀏覽器正在進(jìn)行的其他應(yīng)用進(jìn)程的正常運(yùn)行，無需等待移動終端的響應(yīng)。getCurrentPosition（）方法包含3個參數(shù)。

1）geolocationSuccess：返回的當(dāng)前位置

2）geolocationError：有錯誤發(fā)生時返回的信息

3）geolocationOptions：地理位置選項(xiàng)

getCurrentPositon（）方法[4]是通過使用一個 Position對象作為參數(shù)把移動終端設(shè)備的當(dāng)前位置返回給geolocation Success，如果有錯誤發(fā)生的話，會返回信息給geolocationError參數(shù)中的PositionError對象來做調(diào)用。geolocationOptions參數(shù)主要是配置定位的精確性、位置信息返回的最大等待時間和位置信息使用的最大時間。

3.2 watchPosition（）方法

watchPosition（）方法[5]負(fù)責(zé)定期輪詢用戶的位置，查看用戶的位置是否發(fā)生改變。當(dāng)watchPosition被調(diào)用時，會創(chuàng)建一個新的Position對象和一個watchID，當(dāng)移動終端設(shè)備的位置發(fā)生改變時，一個新的Position對象的返回給geolocation Success而調(diào)用。

3.3 clearWatch（）方法

clearWatch（）方法用來終止正在進(jìn)行的 watchPosition（），該方法只能帶一個參數(shù)。在調(diào)用時，其找到之前已經(jīng)開始了的watchID參數(shù)并立即停止它。

3.4 Position對象

Position對象[6]用來保存地理位置信息，它包含兩個屬性：timestamp和coords。timestamp屬性表示地理位置數(shù)據(jù)的創(chuàng)建時間，coords屬性包含7個具體的位置信息，其中包括：coords.latitude（緯度）、coords.longitude（經(jīng)度）、coords.altitude（高度）、coords.accuracy（以米為單位的經(jīng)度和緯度的精確度）、coords.altitudeAccuracy（以米為單位的高度的精確度）、coords.heading（移動終端設(shè)備當(dāng)前移動的角度方向）和coords.speed（以米每秒為單位的設(shè)備的當(dāng)前速度）。

4 基于HTML5地理定位導(dǎo)航的實(shí)現(xiàn)

4.1 通過JavaScript腳本在頁面渲染地圖

以下分別介紹加載百度和谷歌地圖的代碼

1）加載百度地圖代碼

＜scripttype=”text/javascript”src=”http://api.map.baidu.com/api?v=1.3″＞＜/script＞＜script type=”text/javascript”＞

2）加載谷歌地圖代碼

＜scripttype= ”text/javascript”src= ”http://maps.google.com/maps/api/js?sensor=false ″＞＜/script ＞＜scripttype= ”text/javascript”＞

4.2 自定義初始化Geolocation地理定位函數(shù)

該函數(shù)檢驗(yàn)地理定位是否可在瀏覽器中使用，這一初始化函數(shù)放在JavaScript文件中。如果瀏覽器可以和Geolocation API通信的話，地圖就會被渲染。需要定義的地理定位函數(shù)其實(shí)是getCurrentPosition方法調(diào)用中的第一個參數(shù)。當(dāng)瀏覽器接收到這個函數(shù)的時候，用戶位置數(shù)據(jù)會傳給這個函數(shù)。

具體代碼如下：

4.3 自定義地圖信息顯示函數(shù)

該函數(shù)可在加載的地圖中顯示定位的地理信息數(shù)值，其中包括：經(jīng)度、緯度等；同時還可在地圖中添加標(biāo)注坐標(biāo)。

具體代碼如下：

這個代碼先創(chuàng)建了若干個地理信息變量，這些變量包含了位置參數(shù)的經(jīng)緯度等數(shù)據(jù)。然后這個函數(shù)會把這些信息和一些信息化文本寫入頁面。同時，這些地理信息數(shù)據(jù)還可以用作其他用途，而不僅僅是寫入頁面。

4.4 自定義定位失敗處理函數(shù)

該函數(shù)負(fù)責(zé)定位失敗不同情況的處理，使用地理位置設(shè)備的時候可能會出現(xiàn)錯誤，如，用戶或許不同意共享自己的地理位置數(shù)據(jù)，瀏覽器可能不能檢索數(shù)據(jù)等。因此需要添加一個函數(shù)來處理應(yīng)對錯誤，作為getCurrentPosition方法的第2個參數(shù)函數(shù)使用。這個函數(shù)會對地理位置請求發(fā)出后出現(xiàn)的錯誤信息進(jìn)行檢索，該函數(shù)通過獲取地理定位錯誤返回值的參考以便寫入合適的錯誤信息。具體代碼如下：

以上函數(shù)涵蓋了用戶地理位置數(shù)據(jù)檢索的基本要點(diǎn)。首先，我們可以使用獲取的地理位置數(shù)據(jù)通過谷歌或百度地圖引擎在地圖上顯示用戶位置；其次，我們可以在自定義URL中創(chuàng)建地理數(shù)據(jù)變量，然后將其寫到頁面的HTML圖像要素中；最后，我們還可以使用watchPosition方法追蹤移動終端的位置甚至是移動的速度，盡管這些數(shù)據(jù)因?yàn)槟承┰蚨狈?zhǔn)確性。

5 結(jié) 論

隨著移動終端的大量使用，人們對地理定位和導(dǎo)航的需求會越來越廣泛，基于HTML5實(shí)現(xiàn)地理定位和導(dǎo)航的方法能有效滿足以上的需求。這種基于瀏覽器的地理定位和導(dǎo)航技術(shù)能避免多平臺多操作系統(tǒng)的制約，能滿足多種類地理位置信息的定位，不需要開發(fā)APP應(yīng)用程序以及下載安裝工作，將是基于瀏覽器實(shí)現(xiàn)地理定位和導(dǎo)航的有效手段。

[1]Peter Lubbers.HTML5高級程序設(shè)計[M].北京：人民郵電出版社，2011.

[2]孫鑫，付永杰.HTML5、CSS和JavaScript開發(fā)[M].北京：電子工業(yè)出版社，2012.

[3]Robin Nixon.新手學(xué)HTML5移動開發(fā):面向ios和Android平臺[M].北京：清華大學(xué)出版社，2012.

[4]王志剛.HTML5移動開發(fā)即學(xué)即用[M].北京：電子工業(yè)出版社，2012.

[5]Bruce Lawson.HTML 5用戶指南[M].北京：機(jī)械工業(yè)出版社，2011.

[6]Eric Freeman.深入淺出HTML5編程[M].南京：東南大學(xué)出版社，2012.