基于HTML5的網(wǎng)絡(luò)地圖研究與實(shí)現(xiàn)

岳鵬磊等

摘 要：隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，互聯(lián)網(wǎng)地圖的應(yīng)用已經(jīng)越來越廣泛。文章就基于html5技術(shù)下進(jìn)行的網(wǎng)絡(luò)地圖開發(fā)的一些關(guān)鍵問題進(jìn)行了闡述和說明。

關(guān)鍵詞：網(wǎng)絡(luò)地圖；html5技術(shù)；導(dǎo)航

HTML5，萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改，包括HTML和XHTML的標(biāo)簽，相關(guān)的API、Canvas等，同時(shí)HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn)，性能得到進(jìn)一步提升，而且較之前幾個(gè)版本HTML5又提供了一些新的元素和屬性。HTML5技術(shù)具有很好的跨平臺(tái)性，HTML5技術(shù)能夠?qū)崿F(xiàn)網(wǎng)頁的及時(shí)更新。HTML5技術(shù)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。

1 HTML5技術(shù)的新特性

HTML5是HTML的下一代產(chǎn)品，目前仍然處于完善階段。為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來，成立了WHATWG的組織，在2006年，萬維網(wǎng)決定雙方展開合作，來創(chuàng)建一個(gè)新版本的HTML，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。2014年10月29日，萬維網(wǎng)聯(lián)盟淚流滿面地宣布，經(jīng)過幾乎8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于最終制定完成了，并已公開發(fā)布。這特就意味著HTML5將推動(dòng)Web進(jìn)入新的時(shí)代。

1.1 新的API提高了設(shè)備的兼容性

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

1.2 HTML5擁有更加有效的服務(wù)器推送技術(shù)

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

1.3 離線功能和本地存儲(chǔ)

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

2 基于HTML5的網(wǎng)絡(luò)地圖的創(chuàng)建

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

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

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

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

2.2 獲取地理位置信息

瀏覽器支持W3C地理位置API，執(zhí)行方法getCurrentPosition獲取位置信息，若獲取位置信息失敗則執(zhí)行回調(diào)函數(shù)function showErrorMes（），若獲取位置信息成功則執(zhí)行回調(diào)函數(shù)showPositionMes（）并獲得位置信息詳細(xì)數(shù)據(jù)，代碼如下：

function showPositionMes（position） {

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

經(jīng)度： " + position.coords.longitude

+ "

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

function showErrorMes（error） {

switch （error.code） {

case error.PERMISSION_DENIED：

x.innerHTML = "拒絕請(qǐng)求"；

break；

case error.POSITION_UNAVAILABLE：

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

break；

case error.TIMEOUT：

x.innerHTML = "請(qǐng)求超時(shí)"；

break；

case error.UNKNOWN_ERROR：

x.innerHTML = "未知錯(cuò)誤"；

break；

}

}

2.3 地圖的初始化

首先獲取百度地圖API：

利用獲取到的經(jīng)緯度數(shù)值進(jìn)行地圖的初始化定位，設(shè)置地圖中心為當(dāng)前獲取的地理信息（經(jīng)度，緯度），同時(shí)在地圖上添加比例尺以及默認(rèn)縮放平移控件，具體代碼實(shí)現(xiàn)如下：

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的網(wǎng)絡(luò)地圖的功能實(shí)現(xiàn)

3.1 實(shí)時(shí)定位跟蹤

使用watchPosition方法可以持續(xù)獲取用戶的當(dāng)前地理位置信息，它會(huì)時(shí)刻監(jiān)視用戶的位置，只要用戶的位置發(fā)生變化，瀏覽器就會(huì)自動(dòng)觸發(fā)watchPosition（）的回調(diào)函數(shù)。watchPosition方法與getCurrentPosition使用方法基本相同。另外watchPosition（）有返回值，返回一個(gè)ID，可以使用clearWatch（）方法清除掉，類似于延遲函數(shù)/間隔函數(shù)（setTimeout/setInterval）。getCurrentPosition（）沒有返回值。

執(zhí)行語句如：navigator.geolocation.watchPosition（showPositionMes，showErrorMes，{frequency：1000}），第三個(gè)參數(shù)決定每秒更新一次，最后可以利用clearWatch（）方法終止定位跟蹤。clearWatch（）接收一個(gè)watchPosition（）方法返回的數(shù)據(jù)，實(shí)現(xiàn)的功能是清除對(duì)用戶位置的循環(huán)監(jiān)視，從而終止實(shí)時(shí)定位。

3.2 路線搜索與規(guī)劃

首先添加百度地圖jquery ，然后確定路線的起點(diǎn)和終點(diǎn)，隨后根據(jù)對(duì)路線規(guī)劃的需求，在地圖上規(guī)劃出路線，以下為代碼示例：

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 結(jié)語

當(dāng)下，移動(dòng)智能設(shè)備泛濫的情況下，越來越多的人都熱衷于開發(fā)獨(dú)立的移動(dòng)應(yīng)用，而HTML5技術(shù)也許將會(huì)成為獨(dú)立移動(dòng)應(yīng)用的強(qiáng)有力的競(jìng)爭(zhēng)者。它廣而化之的網(wǎng)絡(luò)標(biāo)準(zhǔn)，以及支持多設(shè)備跨平臺(tái)應(yīng)用的特性，受到大眾的廣泛青睞。而基于此而開發(fā)的網(wǎng)絡(luò)地圖，規(guī)避了多平臺(tái)多操作系統(tǒng)的制約，將會(huì)是瀏覽器實(shí)現(xiàn)地理定位與導(dǎo)航的有效手段。不管你是想開發(fā)出傳統(tǒng)網(wǎng)頁進(jìn)行信息展示平臺(tái)交流還是想開發(fā)出視聽結(jié)合多姿多彩的3D網(wǎng)絡(luò)游戲，不論是PC客戶端應(yīng)用還是手持移動(dòng)應(yīng)用，HTML5都將是創(chuàng)新的主旋律。

[參考文獻(xiàn)]

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

[2]陸凌牛.HTML5與CSS3權(quán)威指南[M].北京：機(jī)械工業(yè)出版社，2013.