基于HTML5地理定位技術的移動終端導航設計

魯 立， 劉 楨

（1.武漢軟件工程職業學院 湖北 武漢 430205；2.武漢中等職業藝術學校 湖北 武漢 430000）

隨著移動通信的發展，現今使用智能手機、平板電腦等移動終端的人數增長迅猛，使用基于移動終端的各類服務也層出不窮；其中，移動終端地理定位與導航的需求與日俱增，國家基礎地理信息中心的統計數據也表明[1]：人們日常生活信息中有80%與空間位置有關，而企業所使用的信息中有59%的信息與空間位置有關。因此，移動定位服務（LBS，Location Based Services）正受到前所未有的關注，它可以提供導航、個人定位、緊急救援等多種應用服務。

1 HTML5的技術特點

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

1.1 HTML5使瀏覽器將部分替代操作系統

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

1.2 HTML5將改變移動互聯應用的開發方法

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

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

2.1 使用地理位置詳細信息的方式

使用JavaScript代碼創建確定用戶地理位置詳細信息的Web應用，這些Web應用能夠通過監控用戶位置隨時間的移動來提供地理定位與導航功能。

2.2 使用IP的方式

使用IP來實現對瀏覽器用戶的地理位置進行跟蹤定位。利用程序讀取一個數據齊全的IP數據庫來實現瀏覽器用戶的定位。但是，通過這種方式得到的位置是不可靠的，因為IP數據庫中的信息可能是錯誤的、不完整的信息。

2.3 使用HTML5地理定位技術

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

3 HTML5地理定位技術的工作原理

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

Geolocation API是JavaScript的navigator全局對象的一個新屬性，navigator對象可以提供關于用戶的瀏覽器和系統的有用信息，而Geolocation API可以通過IP地址、基于web的數據庫、無線網絡連接，以及三角定位或是GPS數據提供用戶的經度和緯度。因為Geolocation API提供的地理信息源的渠道不同，各種提供的地理數據的準確性也根據獲取信息的手段不同而發生變化。相對來說，通過GPS獲取的數據是比較準確的，誤差可以控制在亞米級；通過IP地址獲取的數據就不太準確，可能會獲取錯誤數據或空數據而導致定位錯誤和無法定位。

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

3.1 getCurrentPosition（）方法

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

1）geolocationSuccess：返回的當前位置

2）geolocationError：有錯誤發生時返回的信息

3）geolocationOptions：地理位置選項

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

3.2 watchPosition（）方法

watchPosition（）方法[5]負責定期輪詢用戶的位置，查看用戶的位置是否發生改變。當watchPosition被調用時，會創建一個新的Position對象和一個watchID，當移動終端設備的位置發生改變時，一個新的Position對象的返回給geolocation Success而調用。

3.3 clearWatch（）方法

clearWatch（）方法用來終止正在進行的 watchPosition（），該方法只能帶一個參數。在調用時，其找到之前已經開始了的watchID參數并立即停止它。

3.4 Position對象

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

4 基于HTML5地理定位導航的實現

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地理定位函數

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

具體代碼如下：

4.3 自定義地圖信息顯示函數

該函數可在加載的地圖中顯示定位的地理信息數值，其中包括：經度、緯度等；同時還可在地圖中添加標注坐標。

具體代碼如下：

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

4.4 自定義定位失敗處理函數

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

以上函數涵蓋了用戶地理位置數據檢索的基本要點。首先，我們可以使用獲取的地理位置數據通過谷歌或百度地圖引擎在地圖上顯示用戶位置；其次，我們可以在自定義URL中創建地理數據變量，然后將其寫到頁面的HTML圖像要素中；最后，我們還可以使用watchPosition方法追蹤移動終端的位置甚至是移動的速度，盡管這些數據因為某些原因而缺乏準確性。

5 結 論

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

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

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

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

[4]王志剛.HTML5移動開發即學即用[M].北京：電子工業出版社，2012.

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

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