基于HTML5的地理信息定位的設計與實現

摘要：文章主要介紹了利用HTML5提供的Geolocation類和相關API實現地理信息定位。介紹了HTML5標準中的有關地理定位訪問的API及方法，以一次完整的地理信息定位的過程為場景闡述HTML5如何實現地理信息定位。

關鍵詞：HTML5 " Geolocation

一、應用前景

隨著智能手機的發展，Android平臺手機、iOS平臺手機、WindowsPhone平臺手機不斷推出各種應用程序，瀏覽器的競爭也日趨白熱化，基于Webkit內核的瀏覽器成了主要發展方向。

基于Webkit內核瀏覽器的最大特點，就是支持HTML5和CSS3標準，基于HTML5、CSS3和JavaScript的移動應用程序將是未來的發展趨勢。

現在，很多瀏覽器中都實現了一種能實時獲取當前地圖的位置信息，再利用獲取的地理位置衍生出相關的服務推送，以此來擴展軟件的功能。

二、Geolocation

嚴格來說，Geolocation API不屬于HTML5的標準規范，但是其API接口使它能讓瀏覽器或者移動設備的瀏覽器獲取用戶的當前位置信息。由于地理定位涉及用戶個人隱私信息，因此在人們在第一次使用Geolocation地理定位功能的頁面，都需要用戶確認是否允許Web應用程序獲取自己的位置信息。目前，Geolocation API已經得到大部分瀏覽器的支持，甚至在移動設備領域的瀏覽器都能很好地支持該HTML5特性。

Geolocation API是通過window.navigator.geolocation獲得對地理定位的訪問，獲得對象有三種方法：①get Current Position（ " " " " ）;②watch Position（ " " " " ）;③clear Watch "（ " " " " " "）。

watch Position（ " " " " "）和clear Watch

（ " " " "）是一對方法，watchPosition方法會返回一個唯一標識，clearWatch可通過這個唯一標識清除watchPosition方法的監聽。

三、使用GoogleMaps追蹤位置應用的實現

當人們在移動過程中使用瀏覽器，并能精確判斷位置時，就能真實地感受到“追蹤位置”這一概念。如由Google Maps判定的最后五個位置被標記于地圖上，當用戶離開屏幕顯示的地圖區域時，地圖將以下一個點為中心展開。

我們在window.onload事件中完成Geolocation API的調用，其代碼如下：

Var watchID=navigator.geolocation.watch Position（moveMe，posError，{enableHighAccuracy：true}）;

真正的工作在函數moveMe（ " ）中進行：

function moveMe（position）{

latlng=new google.maps.LatLng（

position.coords.latitude，

position.coords.longtitude）;

bounds=map.getBounds（）;

map.setZoom（16）;

if（！bounds.contains（latlng））{

map.setCenter（latlng）;}

if（marker.lengthgt;=maxMarkers）{

m=marker.shift（）;

if（m）{m.setMap（）;}}

marker.push（new google.maps.Marker（{

position：latlng，map：map，

title：position.coords.accuracy+”m lat：”

+position.coords.latitude+” lon：“+

Position.coords.longtitude}））;}

變量latlng被創建為Google Maps的LatLng對象，當前坐標被傳遞至此對象。若當前位置不在顯示區域，地圖將重新圍繞當前點展開。在腳本一開始，marker數組及變量maxMarkers都已經被定義為全局變量，并被賦值為5。若marker數組包含多于5個元素，第一個元素將通過shift函數從數組中被移除，并通過調用setMap（），在不需要提供更多參考標記的情況下從地圖中刪去。最后，數組中將添加一個標記當前位置的新marker對象。

（作者單位：江西旅游商貿職業學院）