H5在景區(qū)導(dǎo)覽中定位和推送服務(wù)的應(yīng)用研究

湖南應(yīng)用技術(shù)學(xué)院 周潤苗 馬 妮

H5在景區(qū)導(dǎo)覽中定位和推送服務(wù)的應(yīng)用研究

湖南應(yīng)用技術(shù)學(xué)院 周潤苗 馬 妮

隨著智慧旅游和移動互聯(lián)網(wǎng)的發(fā)展，越來越多的游客放棄傳統(tǒng)的報團(tuán)旅游，選擇自由行。如何讓這些自由行的游客得到更多的免費(fèi)導(dǎo)游服務(wù)，得到更好的旅游體驗(yàn)感知，市面應(yīng)用效果不一。如何運(yùn)用簡單的H5實(shí)現(xiàn)景區(qū)導(dǎo)覽中位置定位和推送服務(wù)，達(dá)到免費(fèi)導(dǎo)游的效果是本文研究的內(nèi)容。

HTML5；位置定位；信息推送

1 引言

據(jù)CNNIC第39次報告顯示，我國手機(jī)網(wǎng)民用戶數(shù)量為6.95個億占網(wǎng)民的95.1%；這表明移動互聯(lián)網(wǎng)進(jìn)入普及時代。隨著智慧旅游的發(fā)展，越來越多的人們出行放棄傳統(tǒng)的報團(tuán)旅游，選擇自由行。如何讓這些自由行的游客們得到更多的免費(fèi)導(dǎo)游服務(wù)，如何讓游客的體驗(yàn)需求與移動客戶端相結(jié)合，如何應(yīng)用H5來實(shí)現(xiàn)景區(qū)導(dǎo)覽中的定位和推送服務(wù)兩項(xiàng)功能是本文研究的內(nèi)容。

2 H5在景區(qū)導(dǎo)覽中定位功能的實(shí)現(xiàn)

地理位置（Geolocation）提供用戶實(shí)時位置功能，是 H5 的重要特性之一在景區(qū)導(dǎo)覽系統(tǒng)中只有知道用戶的位置才能提供當(dāng)前位置的導(dǎo)覽信息。

2.1 地理位置定位實(shí)現(xiàn)的方法與原理介紹

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

步驟1：應(yīng)用向?yàn)g覽器請求位置，瀏覽器詢問用戶是否共享位置信息

步驟2：如果用戶允許，瀏覽器向相應(yīng)位置服務(wù)發(fā)送本地網(wǎng)絡(luò)信息

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

2.2 H5實(shí)現(xiàn)景區(qū)內(nèi)用戶地理位置的定位

H5地理位置定位的實(shí)現(xiàn)流程：

步驟1：實(shí)現(xiàn)基于瀏覽器獲取用戶的地理位置技術(shù)

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

步驟3：持續(xù)追蹤用戶的地理位置

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

2.3 實(shí)現(xiàn)方法

2.3.1 實(shí)現(xiàn)原理

實(shí)現(xiàn)原理：html5地理定位 + 百度地圖

2.3.2 實(shí)現(xiàn)思路

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

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

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

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

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

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

③調(diào)用百度地圖接口，將獲取到的經(jīng)緯度以參數(shù)形式參入百度地圖地理坐標(biāo)中，實(shí)現(xiàn)代碼如下所示：

3 H5在景區(qū)導(dǎo)覽中推送服務(wù)的應(yīng)用

在景區(qū)中用戶掃描二維碼就看到景區(qū)信息頁面，如果景區(qū)較大，則可跟據(jù)用戶的位置定位，實(shí)時推送景區(qū)的相關(guān)信息。

3.1 常見的Server端數(shù)據(jù)推送方法

方法1：WebSocket，此方法基于TCP協(xié)議實(shí)現(xiàn)，用SSE連接，實(shí)現(xiàn)比較復(fù)雜。

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

方法3：COMET方法，是延長了輪詢間隔時長，在每次請求時，Server端不會響應(yīng)完當(dāng)前請求后立即關(guān)閉，而是在一段時間內(nèi)保持打開狀態(tài)以使Server端產(chǎn)生的更新數(shù)據(jù)可被及時返回給瀏覽器。連接會一個接著一個，不間斷。COMET 技術(shù)不是H5標(biāo)準(zhǔn)，實(shí)現(xiàn)較復(fù)雜，實(shí)現(xiàn)需第三方庫支持。

方法4：服務(wù)器推送方法，是 H5的一部分，可從Server端實(shí)時推送信息到Client端。兼容性強(qiáng)，實(shí)現(xiàn)原理簡單，能滿足景區(qū)導(dǎo)覽推送服務(wù)。

3.2 利用H5的服務(wù)器推送（Server-sent Events）方法實(shí)現(xiàn)景區(qū)導(dǎo)覽中推送服務(wù)

3.2.1 Server-sent Events5規(guī)范

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

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

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

EventSource采用事件監(jiān)聽器原理來實(shí)現(xiàn)，瀏覽器在JS用Event-Source對象來處理服務(wù)器返回的響應(yīng)，提供三個事件，分別如下示：

3.2.2 景區(qū)導(dǎo)覽中推送服務(wù)實(shí)現(xiàn)

服務(wù)器端實(shí)現(xiàn)（此處由JAVA實(shí)現(xiàn)，由兩部份組成）：Event-Source 接口用來產(chǎn)生數(shù)據(jù)， servlet 實(shí)現(xiàn)瀏覽器訪問。EventSource接口的實(shí)現(xiàn)類需實(shí)現(xiàn) EventSource 接口的如下方法：

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

瀏覽器端實(shí)現(xiàn)：瀏覽器端實(shí)現(xiàn)原理簡單，創(chuàng)建 EventSource 對象，對相關(guān)事件方法進(jìn)行處理即可。

4 結(jié)束語

本文將h5應(yīng)用于景區(qū)導(dǎo)覽設(shè)計(jì)中，實(shí)現(xiàn)用戶定位和景區(qū)信息推送服務(wù)，用戶定位使用的是h5的geolocation，信息推送服務(wù)使用的是基于 H5的服務(wù)器推送事件將數(shù)據(jù)從服務(wù)器端推送到瀏覽器。H5的應(yīng)用實(shí)現(xiàn)簡單，不需要下載，用戶使用方便。

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

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

注：本文系湖南省教育廳科學(xué)研究項(xiàng)目“H5交互設(shè)計(jì)在旅游景區(qū)導(dǎo)覽系統(tǒng)中的應(yīng)用研究”（項(xiàng)目編號：16C1182）成果。