基于HTML5實現搖一搖定位附近農場

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

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

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

一、 HTML5的優點

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

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

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

二、HTML5中Device Orientation特性

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

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

三、HTML5地理定位

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

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

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

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

2.多種瀏覽器顯示支持

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

3.HTML5 地理定位的應用

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

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

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

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

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

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

四、結束語

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