岳鵬磊等
摘 要:隨著互聯(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)記語言下的一個應(yīng)用超文本標(biāo)記語言(HTML)的第五次重大修改,包括HTML和XHTML的標(biāo)簽,相關(guān)的API、Canvas等,同時HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn),性能得到進(jìn)一步提升,而且較之前幾個版本HTML5又提供了一些新的元素和屬性。HTML5技術(shù)具有很好的跨平臺性,HTML5技術(shù)能夠?qū)崿F(xiàn)網(wǎng)頁的及時更新。HTML5技術(shù),實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。
1 HTML5技術(shù)的新特性
HTML5是HTML的下一代產(chǎn)品,目前仍然處于完善階段。為了推動Web標(biāo)準(zhǔn)化運(yùn)動的發(fā)展,一些公司聯(lián)合起來,成立了WHATWG的組織,在2006年,萬維網(wǎng)決定雙方展開合作,來創(chuàng)建一個新版本的HTML,以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候,使網(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將推動Web進(jìn)入新的時代。
1.1 新的API提高了設(shè)備的兼容性
HTML5擁有一些新的API。例如:canvas,用于渲染圖形或是其他的視覺圖像,甚至可以直接做出偽3D游戲;地理位置共享,通過Geolocation功能從而獲取用戶的地理位置信息;一個和draggable屬性一起使用的拖放API;跨文檔請求,websocket,一種更加高效的通訊方式,等等一些新的API。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口,使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連,來幫助開發(fā)者構(gòu)建精彩的桌面和移動應(yīng)用程序。
1.2 HTML5擁有更加有效的服務(wù)器推送技術(shù)
更有效的連接工作效率,使得基于頁面的實時聊天,更快速的網(wǎng)頁游戲體驗,更優(yōu)化的在線交流得到了實現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù),Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特性能夠幫助我們實現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。其中主要是Web Sockets協(xié)議,能讓瀏覽器和服務(wù)器保持鏈接,這意味著網(wǎng)頁能夠承載需要即時通信的網(wǎng)絡(luò)應(yīng)用:聊天、在線游戲等等。
1.3 離線功能和本地存儲
HTML5提供了一個非常重要的特性,可以編寫離線應(yīng)用程序。所以理論上,我們可以有離線的Gmail,可以在沒有網(wǎng)絡(luò)連接的時候編寫郵件在上線時發(fā)送;對于手機(jī),我們可以有HTML5版本的Google Reader,在有網(wǎng)絡(luò)的時候下載新聞供離線時閱讀。而有了離線功能,也能讓網(wǎng)頁應(yīng)用程序可以和原生應(yīng)用程序競爭了。HTML5中定義的WebStorage已經(jīng)被廣泛的支持,利用本地存儲技術(shù),可以緩存一些不經(jīng)常變更的數(shù)據(jù),比如導(dǎo)航,腳部申明等,保存用戶的一些個性化設(shè)置;用戶的瀏覽歷史等。
2 基于HTML5的網(wǎng)絡(luò)地圖的創(chuàng)建
在HTML5中,利用window.navigator對象的新增屬性geolocation,通過Geolocation API對該屬性進(jìn)行訪問。如果瀏覽器支持地理定位,就能夠直接使用這組API來獲取當(dāng)前位置信息,對于擁有GPS的設(shè)備,比如iPhone,地理定位更加精確。借助地理位置(geolocation)這個特性,我們可以確定用戶的位置,從而開發(fā)基于位置信息的應(yīng)用。此外,HTML5的Geolocation API主要特點(diǎn)還包括以下兩個方面:其一,API不去獲取用戶的具體位置信息,而是通過其他三方接口來獲取,例如IP,GPS,WIFI等方式。其二,用戶擁有自足選擇權(quán),程序執(zhí)行時會首先征得用戶同意,基于這個特性我們能夠很好的保護(hù)用戶的隱私。
2.1 檢測瀏覽器是否支持W3C地理位置API
如果瀏覽器支持W3C地理位置API,則執(zhí)行方法getCurrentPosition,參數(shù)showPositionMes,showErrorMes分別為后續(xù)具體方法。否則提示瀏覽器不支持HTML5地理位置信息,下面的代碼實現(xiàn)檢測瀏覽器是否支持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 = "拒絕請求";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "位置信息不可用";
break;
case error.TIMEOUT:
x.innerHTML = "請求超時";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "未知錯誤";
break;
}
}
2.3 地圖的初始化
首先獲取百度地圖API:
利用獲取到的經(jīng)緯度數(shù)值進(jìn)行地圖的初始化定位,設(shè)置地圖中心為當(dāng)前獲取的地理信息(經(jīng)度,緯度),同時在地圖上添加比例尺以及默認(rèn)縮放平移控件,具體代碼實現(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ò)地圖的功能實現(xiàn)
3.1 實時定位跟蹤
使用watchPosition方法可以持續(xù)獲取用戶的當(dāng)前地理位置信息,它會時刻監(jiān)視用戶的位置,只要用戶的位置發(fā)生變化,瀏覽器就會自動觸發(fā)watchPosition()的回調(diào)函數(shù)。watchPosition方法與getCurrentPosition使用方法基本相同。另外watchPosition()有返回值,返回一個ID,可以使用clearWatch()方法清除掉,類似于延遲函數(shù)/間隔函數(shù)(setTimeout/setInterval)。getCurrentPosition()沒有返回值。
執(zhí)行語句如:navigator.geolocation.watchPosition(showPositionMes,showErrorMes,{frequency:1000}),第三個參數(shù)決定每秒更新一次,最后可以利用clearWatch()方法終止定位跟蹤。clearWatch()接收一個watchPosition()方法返回的數(shù)據(jù),實現(xiàn)的功能是清除對用戶位置的循環(huán)監(jiān)視,從而終止實時定位。
3.2 路線搜索與規(guī)劃
首先添加百度地圖jquery ,然后確定路線的起點(diǎn)和終點(diǎn),隨后根據(jù)對路線規(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)下,移動智能設(shè)備泛濫的情況下,越來越多的人都熱衷于開發(fā)獨(dú)立的移動應(yīng)用,而HTML5技術(shù)也許將會成為獨(dú)立移動應(yīng)用的強(qiáng)有力的競爭者。它廣而化之的網(wǎng)絡(luò)標(biāo)準(zhǔn),以及支持多設(shè)備跨平臺應(yīng)用的特性,受到大眾的廣泛青睞。而基于此而開發(fā)的網(wǎng)絡(luò)地圖,規(guī)避了多平臺多操作系統(tǒng)的制約,將會是瀏覽器實現(xiàn)地理定位與導(dǎo)航的有效手段。不管你是想開發(fā)出傳統(tǒng)網(wǎng)頁進(jìn)行信息展示平臺交流還是想開發(fā)出視聽結(jié)合多姿多彩的3D網(wǎng)絡(luò)游戲,不論是PC客戶端應(yī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.