H5在景區導覽中定位和推送服務的應用研究

湖南應用技術學院 周潤苗 馬 妮

H5在景區導覽中定位和推送服務的應用研究

湖南應用技術學院 周潤苗 馬 妮

隨著智慧旅游和移動互聯網的發展，越來越多的游客放棄傳統的報團旅游，選擇自由行。如何讓這些自由行的游客得到更多的免費導游服務，得到更好的旅游體驗感知，市面應用效果不一。如何運用簡單的H5實現景區導覽中位置定位和推送服務，達到免費導游的效果是本文研究的內容。

HTML5；位置定位；信息推送

1 引言

據CNNIC第39次報告顯示，我國手機網民用戶數量為6.95個億占網民的95.1%；這表明移動互聯網進入普及時代。隨著智慧旅游的發展，越來越多的人們出行放棄傳統的報團旅游，選擇自由行。如何讓這些自由行的游客們得到更多的免費導游服務，如何讓游客的體驗需求與移動客戶端相結合，如何應用H5來實現景區導覽中的定位和推送服務兩項功能是本文研究的內容。

2 H5在景區導覽中定位功能的實現

地理位置（Geolocation）提供用戶實時位置功能，是 H5 的重要特性之一在景區導覽系統中只有知道用戶的位置才能提供當前位置的導覽信息。

2.1 地理位置定位實現的方法與原理介紹

地理位置定位的方法有：GSM/CDMA、Wif i、GPS、IP地址和H5。地理位置定位獲取實現流程：

步驟1：應用向瀏覽器請求位置，瀏覽器詢問用戶是否共享位置信息

步驟2：如果用戶允許，瀏覽器向相應位置服務發送本地網絡信息

步驟3：位置服務器返回具體的用戶位置

2.2 H5實現景區內用戶地理位置的定位

H5地理位置定位的實現流程：

步驟1：實現基于瀏覽器獲取用戶的地理位置技術

步驟2：精確定位用戶的地理位置

步驟3：持續追蹤用戶的地理位置

步驟4：與Baidu Map（也可是其它地圖）等交互呈現位置信息

2.3 實現方法

2.3.1 實現原理

實現原理：html5地理定位 + 百度地圖

2.3.2 實現思路

①判斷瀏覽器是否支持geolocation地理定位。

②用HTML5 Geolocation API (地理位置應用程序接口)獲取經緯度。

獲取基于Browser的當前用戶實時地理位置的Navigator.geolocation。其提供了3個方法，分別是：

方法1：void getCurrentPosition(onSuccess,onError,options)，該方法用于獲取用戶當前位置，onSuccess是成功獲取位置信息的回調函數，它是方法不可缺省的參數，onError參數用于獲取出錯信息，options參數是配置項參數；

方法2：int watchCurrentPosition(onSuccess,onError,options) 該方法用于持續獲取當前用戶位置；

方法3：void clearWatch(watchId)，其參數watchId 是watchCurrentPosition方法的結果，該方法的功能是取消監控。

③調用百度地圖接口，將獲取到的經緯度以參數形式參入百度地圖地理坐標中，實現代碼如下所示：

3 H5在景區導覽中推送服務的應用

在景區中用戶掃描二維碼就看到景區信息頁面，如果景區較大，則可跟據用戶的位置定位，實時推送景區的相關信息。

3.1 常見的Server端數據推送方法

方法1：WebSocket，此方法基于TCP協議實現，用SSE連接，實現比較復雜。

方法2：簡易輪詢法，是指Browser定時向Server發請求，查詢判斷數據是否更新，實現簡單，但需慎對輪詢時長，時長過短會增加查詢量和Server開銷。

方法3：COMET方法，是延長了輪詢間隔時長，在每次請求時，Server端不會響應完當前請求后立即關閉，而是在一段時間內保持打開狀態以使Server端產生的更新數據可被及時返回給瀏覽器。連接會一個接著一個，不間斷。COMET 技術不是H5標準，實現較復雜，實現需第三方庫支持。

方法4：服務器推送方法，是 H5的一部分，可從Server端實時推送信息到Client端。兼容性強，實現原理簡單，能滿足景區導覽推送服務。

3.2 利用H5的服務器推送（Server-sent Events）方法實現景區導覽中推送服務

3.2.1 Server-sent Events5規范

Server-sent Events5由兩個部分組成：

①服務器端與瀏覽器端之間的通訊協議(基于純文本的簡單協議)。

②在瀏覽器端可供 JS使用的 EventSource 對象。

EventSource采用事件監聽器原理來實現，瀏覽器在JS用Event-Source對象來處理服務器返回的響應，提供三個事件，分別如下示：

3.2.2 景區導覽中推送服務實現

服務器端實現（此處由JAVA實現，由兩部份組成）：Event-Source 接口用來產生數據， servlet 實現瀏覽器訪問。EventSource接口的實現類需實現 EventSource 接口的如下方法：

與 MovementEventSource 類對應的 servlet繼承自 EventSource-Servlet 類，需重寫 newEventSource 方法。

瀏覽器端實現：瀏覽器端實現原理簡單，創建 EventSource 對象，對相關事件方法進行處理即可。

4 結束語

本文將h5應用于景區導覽設計中，實現用戶定位和景區信息推送服務，用戶定位使用的是h5的geolocation，信息推送服務使用的是基于 H5的服務器推送事件將數據從服務器端推送到瀏覽器。H5的應用實現簡單，不需要下載，用戶使用方便。

[1]梁中義.基于HTML5的計算機全景漫游系統制作平臺的設計分析[J].西安文理學院學報(自然科學版),2017,(03):82-85.

[2]劉紅英.Web開發中HTML5技術的應用[J].信息與電腦(理論版),2017,(05):63-65.

注：本文系湖南省教育廳科學研究項目“H5交互設計在旅游景區導覽系統中的應用研究”（項目編號：16C1182）成果。