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）成果。