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

殷雙金 李勇 金鑫 余建軍 李翔 王權海

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

關鍵詞：HTML5；搖一搖；特性

一、 HTML5的優(yōu)點

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

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

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

二、HTML5中Device Orientation特性

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

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

三、HTML5地理定位

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

1.定位用戶和農場的位置

我們可以通過HTML5 中的Geolocation API 來獲得用戶和目標農場的地理位置。

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

2.多種瀏覽器顯示支持

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

3.HTML5 地理定位的應用

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

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

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

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

如需在我們設計的地圖界面中顯示結果，則需要訪問精確的并且可以使用經緯度的地圖服務，比如百度地圖。

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

四、結束語

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