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

魯 立， 劉 楨

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

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

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

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

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

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

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

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

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

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

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

2.2 使用IP的方式

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

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

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

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

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

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

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

3.1 getCurrentPosition（）方法

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

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

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

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

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

3.2 watchPosition（）方法

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

3.3 clearWatch（）方法

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

3.4 Position對(duì)象

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

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

4.1 通過(guò)JavaScript腳本在頁(yè)面渲染地圖

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

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通信的話(huà)，地圖就會(huì)被渲染。需要定義的地理定位函數(shù)其實(shí)是getCurrentPosition方法調(diào)用中的第一個(gè)參數(shù)。當(dāng)瀏覽器接收到這個(gè)函數(shù)的時(shí)候，用戶(hù)位置數(shù)據(jù)會(huì)傳給這個(gè)函數(shù)。

具體代碼如下：

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

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

具體代碼如下：

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

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

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

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

5 結(jié) 論

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

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

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

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

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

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

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