基于HTML5實現(xiàn)搖一搖定位附近農(nóng)場

殷雙金 李勇 金鑫 余建軍 李翔 王權(quán)海

摘 要：隨著我國經(jīng)濟的高速發(fā)展，國民經(jīng)濟和財政收入增速有所放緩，因此農(nóng)副產(chǎn)品需求、農(nóng)業(yè)投入量、農(nóng)民工就業(yè)和工資水平的增長都將受到了一定影響，生態(tài)旅游作為廣大農(nóng)民增收的一種重要形式，必將在農(nóng)民增收中占據(jù)重要地位，然而目前各大手機地圖APP為節(jié)省寶貴的數(shù)據(jù)空間往往沒有錄入偏遠地區(qū)的農(nóng)家樂，為廣大城市旅游者及農(nóng)民朋友帶來了困擾。HTML5技術(shù)避免了APP地圖需要的巨大本地內(nèi)存帶來的客戶體驗度問題，占據(jù)的本地內(nèi)存較小，充分發(fā)揮其設(shè)備適應(yīng)性強的優(yōu)點，并結(jié)合搖一搖的功能使整個搜索功能簡單有趣。

關(guān)鍵詞：HTML5；搖一搖；特性

一、 HTML5的優(yōu)點

多種移動設(shè)備和pc設(shè)備的跨平臺使用：HTML5的優(yōu)勢主要在于，通過這個技術(shù)開發(fā)出來的網(wǎng)站，可以進行跨平臺的使用。比如基于HTML5開發(fā)了一款游戲或者是應(yīng)用，開發(fā)者可以非常輕易地將其移植到Opera的游戲中心、UC的開放平臺、Facebook應(yīng)用平臺，更甚者還可以通過編程中的封裝技術(shù)放到國外的諸多平臺上，比如App Store或Google Play，所以使用HTML5技術(shù)開發(fā)的應(yīng)用軟件的跨平臺性非常強大。

網(wǎng)站中自適應(yīng)網(wǎng)頁的設(shè)計：很早之前，就有人提出了能不能“通過某種開發(fā)技術(shù)開發(fā)一個網(wǎng)頁，普遍適用”，即讓我們開發(fā)的同一張網(wǎng)頁能夠自動適應(yīng)不同尺寸大小的屏幕，能夠智能地根據(jù)屏幕寬度，自動調(diào)整布局（layout）。這樣我們就就解決了傳統(tǒng)中遇到的一種尷尬局面——我們設(shè)計的網(wǎng)站為不同的移動設(shè)備或者是PC設(shè)備需要提供不同的網(wǎng)頁，比如需要專門提供一個安卓手機版本，或者iPhone / iPad版本。這樣做雖然也能保證效果，但是比較麻煩并且開發(fā)成本高，維護難度大，而且如果一個網(wǎng)站有多個portal（入口），則會大大增加架構(gòu)設(shè)計的復(fù)雜度和開發(fā)難度。

更新的及時性：應(yīng)用的客戶端每次都要更新，非常的繁瑣，用戶感知性極差。但是我們采用HTML5技術(shù)的話，更新網(wǎng)站應(yīng)用或者游戲就好像更新頁面一樣，給用戶的感知是即時的更新，不需要下載安裝新版本。我們可以總結(jié)概述HTML5的優(yōu)點如下：（1）可以改進用戶的友好體驗和提高可用性；（2）不需要下載視頻插件，能夠很好的替代FLASH和Silverlight； （3）新增的標(biāo)簽，將有助于開發(fā)人員重新定義重要的內(nèi)容；（4）對于網(wǎng)站抓取和索引的時候，SEO很友好；（6）將為更多的移動應(yīng)用程序和游戲提供各種想象；（7）可移植性好。

二、HTML5中Device Orientation特性

HTML5中有許多特性，例如語義特性（Class：Semantic），本地存儲特性（Class： OFFLINE & STORAGE），設(shè)備兼容特性 （Class： DEVICE ACCESS），連接特性（Class： CONNECTIVITY）等等。為實現(xiàn)搖一搖功能，此處我們需要用到HTML5的另一特性，就是我們常常提到的Device Orientation特性。HTML5技術(shù)將底層的方向傳感器和運動傳感器實現(xiàn)代碼進行了高級封裝，并且還提供了DOM事件的支持。我們通過研究發(fā)現(xiàn)這個特性包括兩個事件：第一就是 device-Orientation封裝了方向傳感器數(shù)據(jù)的事件，通過此事件我們可以獲取手機靜止?fàn)顟B(tài)時的方向數(shù)據(jù)信息，比如用戶所持的手機所處角度、方位等。第二就是device-Motion封裝了運動傳感器數(shù)據(jù)的事件，通過此事件我們可以獲取手機運動狀態(tài)時的運動加速度等數(shù)據(jù)信息。我們使用能夠很容易的實現(xiàn)重力感應(yīng)功能、指南針功能等有趣的功能，而這些功能應(yīng)用，在手機上將非常有用。其實，這項技術(shù)還能幫助我們在網(wǎng)頁上實現(xiàn)一個應(yīng)用于手機的、不常見卻時尚的功能：手機搖一搖。這就是我們此處需要著重描述的功能應(yīng)用。

Device Motion Event（移動設(shè)備運動事件）返回移動設(shè)備有關(guān)于加速度和旋轉(zhuǎn)的相關(guān)數(shù)據(jù)信息。我們獲得的加速度的數(shù)據(jù)信息將包含三個軸：x，y和z的實時信息，x軸橫向貫穿平板屏幕或者手機屏幕，y軸縱向貫穿平板屏幕或者手機屏幕，z軸垂直于平板屏幕或者手機屏幕，考慮到移動設(shè)備可能沒有硬件來排除重力的影響，因此該事件會返回兩個屬性含重力的加速度和加速度。

三、HTML5地理定位

地理位置（Geolocation）是 HTML5 的比較突出的優(yōu)勢之一，它提供了精確定位用戶位置的功能，我們可以借助這個特性開發(fā)基于位置信息的各種助農(nóng)應(yīng)用。

1.定位用戶和農(nóng)場的位置

我們可以通過HTML5 中的Geolocation API 來獲得用戶和目標(biāo)農(nóng)場的地理位置。

但是考慮到該特性可能侵犯用戶的隱私，因此需要得到用戶同意，否則定位功能是不可用的。

2.多種瀏覽器顯示支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 如今都擁有了支持地理位置的功能。擁有 GPS 的移動設(shè)備，比如 iPhone，智能手機的地理定位將會更加精確。

3.HTML5 地理定位的應(yīng)用

我們可以使用get Current Position（）方法來獲得用戶和農(nóng)場的精確位置。

4.處理操作中的錯誤和拒絕

我們通過編程，使用getCurrentPosition（） 方法的第二個參數(shù)用于處理操作過程中遇到的錯誤。

5.在地圖界面中的顯示功能

如需在我們設(shè)計的地圖界面中顯示結(jié)果，則需要訪問精確的并且可以使用經(jīng)緯度的地圖服務(wù)，比如百度地圖。

至此，我們完成了利用HTML5的位置信息——緯度、經(jīng)度和其他特性，來實現(xiàn)定位的功能。

四、結(jié)束語

對大家來說，HTML5技術(shù)而今已不再陌生，不管是趨之若鶩，熱情擁抱，還是遠遠張望，保持距離，HTML5都是技術(shù)論壇熱門的話題，給人的感覺就是酷、新、看上去很美。但是HTML5也有他的適用范圍，HTML5技術(shù)是一種被夸大了的萬金油，在目前瀏覽器支持不一，開發(fā)工具，第三方類庫缺乏的情況下，HTML5無法解決一切問題，但如果限定它的使用范圍，HTML5確實可以優(yōu)雅的解決很多問題，HTML5實現(xiàn)搖一搖定位就是其中的一個。而面向未來互聯(lián)網(wǎng)，基于“云+終端”的構(gòu)架，終端的HTML5的兼容解決方案必然會出現(xiàn)，那時候我們就可以全面擁抱HTML5了。