基于HTML5的網絡地圖研究與實現

岳鵬磊等

摘 要：隨著互聯網技術的飛速發展，互聯網地圖的應用已經越來越廣泛。文章就基于html5技術下進行的網絡地圖開發的一些關鍵問題進行了闡述和說明。

關鍵詞：網絡地圖；html5技術；導航

HTML5，萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改，包括HTML和XHTML的標簽，相關的API、Canvas等，同時HTML5的圖像img標簽及svg也進行了改進，性能得到進一步提升，而且較之前幾個版本HTML5又提供了一些新的元素和屬性。HTML5技術具有很好的跨平臺性，HTML5技術能夠實現網頁的及時更新。HTML5技術，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。

1 HTML5技術的新特性

HTML5是HTML的下一代產品，目前仍然處于完善階段。為了推動Web標準化運動的發展，一些公司聯合起來，成立了WHATWG的組織，在2006年，萬維網決定雙方展開合作，來創建一個新版本的HTML，以期能在互聯網應用迅速發展的時候，使網絡標準達到符合當代的網絡需求。2014年10月29日，萬維網聯盟淚流滿面地宣布，經過幾乎8年的艱辛努力，HTML5標準規范終于最終制定完成了，并已公開發布。這特就意味著HTML5將推動Web進入新的時代。

1.1 新的API提高了設備的兼容性

HTML5擁有一些新的API。例如：canvas，用于渲染圖形或是其他的視覺圖像，甚至可以直接做出偽3D游戲；地理位置共享，通過Geolocation功能從而獲取用戶的地理位置信息；一個和draggable屬性一起使用的拖放API；跨文檔請求，websocket，一種更加高效的通訊方式，等等一些新的API。HTML5提供了前所未有的數據與應用接入開放接口，使外部應用可以直接與瀏覽器內部的數據直接相連，來幫助開發者構建精彩的桌面和移動應用程序。

1.2 HTML5擁有更加有效的服務器推送技術

更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網頁游戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能。其中主要是Web Sockets協議，能讓瀏覽器和服務器保持鏈接，這意味著網頁能夠承載需要即時通信的網絡應用：聊天、在線游戲等等。

1.3 離線功能和本地存儲

HTML5提供了一個非常重要的特性，可以編寫離線應用程序。所以理論上，我們可以有離線的Gmail，可以在沒有網絡連接的時候編寫郵件在上線時發送；對于手機，我們可以有HTML5版本的Google Reader，在有網絡的時候下載新聞供離線時閱讀。而有了離線功能，也能讓網頁應用程序可以和原生應用程序競爭了。HTML5中定義的WebStorage已經被廣泛的支持，利用本地存儲技術，可以緩存一些不經常變更的數據，比如導航，腳部申明等，保存用戶的一些個性化設置；用戶的瀏覽歷史等。

2 基于HTML5的網絡地圖的創建

在HTML5中，利用window.navigator對象的新增屬性geolocation，通過Geolocation API對該屬性進行訪問。如果瀏覽器支持地理定位，就能夠直接使用這組API來獲取當前位置信息，對于擁有GPS的設備，比如iPhone，地理定位更加精確。借助地理位置（geolocation）這個特性，我們可以確定用戶的位置，從而開發基于位置信息的應用。此外，HTML5的Geolocation API主要特點還包括以下兩個方面：其一，API不去獲取用戶的具體位置信息，而是通過其他三方接口來獲取，例如IP，GPS，WIFI等方式。其二，用戶擁有自足選擇權，程序執行時會首先征得用戶同意，基于這個特性我們能夠很好的保護用戶的隱私。

2.1 檢測瀏覽器是否支持W3C地理位置API

如果瀏覽器支持W3C地理位置API，則執行方法getCurrentPosition，參數showPositionMes，showErrorMes分別為后續具體方法。否則提示瀏覽器不支持HTML5地理位置信息，下面的代碼實現檢測瀏覽器是否支持navigator.geolocation。

if（navigator.geolocation） { navigator.geolocation.getCurrentPosition（showPositionMes， showErrorMes）； }else { alert（"您的瀏覽器不支持Html5地理位置信息"）； }

2.2 獲取地理位置信息

瀏覽器支持W3C地理位置API，執行方法getCurrentPosition獲取位置信息，若獲取位置信息失敗則執行回調函數function showErrorMes（），若獲取位置信息成功則執行回調函數showPositionMes（）并獲得位置信息詳細數據，代碼如下：

function showPositionMes（position） {

x.innerHTML = "緯度：" + position.coords.latitude + "

經度： " + position.coords.longitude

+ "

海拔高度： " + position.coords.altitude；}

function showErrorMes（error） {

switch （error.code） {

case error.PERMISSION_DENIED：

x.innerHTML = "拒絕請求"；

break；

case error.POSITION_UNAVAILABLE：

x.innerHTML = "位置信息不可用"；

break；

case error.TIMEOUT：

x.innerHTML = "請求超時"；

break；

case error.UNKNOWN_ERROR：

x.innerHTML = "未知錯誤"；

break；

}

}

2.3 地圖的初始化

首先獲取百度地圖API：

利用獲取到的經緯度數值進行地圖的初始化定位，設置地圖中心為當前獲取的地理信息（經度，緯度），同時在地圖上添加比例尺以及默認縮放平移控件，具體代碼實現如下：

var map = new BMap.Map（"yplmap"）；

var point = new BMap.Point（position.coords.longitude，position.coords.latitude）；

map.centerAndZoom（point，14）；

var top_left_control = new BMap.ScaleControl（{anchor： BMAP_ANCHOR_TOP_LEFT}）；

var top_left_navigation = new BMap.NavigationControl（）；

map.addControl（top_left_control）；

map.addControl（top_left_navigation）；

3 基于HTML5的網絡地圖的功能實現

3.1 實時定位跟蹤

使用watchPosition方法可以持續獲取用戶的當前地理位置信息，它會時刻監視用戶的位置，只要用戶的位置發生變化，瀏覽器就會自動觸發watchPosition（）的回調函數。watchPosition方法與getCurrentPosition使用方法基本相同。另外watchPosition（）有返回值，返回一個ID，可以使用clearWatch（）方法清除掉，類似于延遲函數/間隔函數（setTimeout/setInterval）。getCurrentPosition（）沒有返回值。

執行語句如：navigator.geolocation.watchPosition（showPositionMes，showErrorMes，{frequency：1000}），第三個參數決定每秒更新一次，最后可以利用clearWatch（）方法終止定位跟蹤。clearWatch（）接收一個watchPosition（）方法返回的數據，實現的功能是清除對用戶位置的循環監視，從而終止實時定位。

3.2 路線搜索與規劃

首先添加百度地圖jquery ，然后確定路線的起點和終點，隨后根據對路線規劃的需求，在地圖上規劃出路線，以下為代碼示例：

var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME，BMAP_DRIVING_POLICY_LEAST_DISTANCE，BMAP_DRIVING_POLICY_AVOID_HIGHWAYS]；

$（"#yplresult"）.click（function（）{

map.clearOverlays（）；

var i=$（"#ypldriving_way select"）.val（）；

search（start，end，routePolicy[i]）；

function search（start，end，route）{ var driving = new BMap.DrivingRoute（map， {renderOptions：{map： map， autoViewport： true}，policy： route}）；

driving.search（start，end）；}}）；

4 結語

當下，移動智能設備泛濫的情況下，越來越多的人都熱衷于開發獨立的移動應用，而HTML5技術也許將會成為獨立移動應用的強有力的競爭者。它廣而化之的網絡標準，以及支持多設備跨平臺應用的特性，受到大眾的廣泛青睞。而基于此而開發的網絡地圖，規避了多平臺多操作系統的制約，將會是瀏覽器實現地理定位與導航的有效手段。不管你是想開發出傳統網頁進行信息展示平臺交流還是想開發出視聽結合多姿多彩的3D網絡游戲，不論是PC客戶端應用還是手持移動應用，HTML5都將是創新的主旋律。

[參考文獻]

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

[2]陸凌牛.HTML5與CSS3權威指南[M].北京：機械工業出版社，2013.