基于百度地图的HTML5地理定位技术应用实践

基于百度地图的HTML5地理定位技术应用实践
作者：季耀君
来源：《成都工业学院学报》2018年第04期
摘要：HTML5新功能和新特性，为推动跨平台Web应用服务增添了新鲜活力。

地理定位是HTML5的重要特性，HTML5定义了一系列API编程接口和规范，能够为用户提供全面的地理定位服务。

通过阐述HTML5地理位置定位技术原理，利用HTML5提供的Geolocation、getCurrentPosition、Watchposition 3个API实现了用户位置的获取、定位与持续追踪，通过HTML5和Baidu Map实现位置信息的交互，说明HTML5地理定位技术的实现过程。

关键词：Html5;跨平台;地理定位技术;Baidu Map API;Google Map API
中图分类号：TP393文献标志码：A
文章编号：2095-5383（2018）04-0019-04
HTML5规范了在Web浏览器中使用JavaScript的地理定位Geolocation API，使得大多数Web用户都可以在桌面和移动环境中使用地理位置定位服务。

Geolocation API定义了只与主机设备相关高层次的位置信息接口，比如纬度和经度，API本身是不可知的基础位置信息源。

位置信息的常见来源包括IP、GPS、RFID、GSM / CDMA cell IDs等。

API的设计是为了允许一次性位置请求和重复位置的更新及显式查询缓存位置的能力来保证API返回设备的实际位置，位置信息用经纬度坐标表示。

1地理定位技术的应用现状
近年来，地理定位技术成为网络技术热门话题，获取用户位置对于建立更好的用户体验非常关键。

之前检索用户位置信息，往往是通过用户设备的IP地址对其位置进行粗略估计，而现在能使用地理定位API的方式降低操作难度，提升定位的准确性[1]。

地理位置Geolocation 是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能开发出基于位置信息的应用。

例如，通过HTML5地理定位技术，电子商务公司可以进行运输成本估算，通知客户产品运输实时情况;新闻站点可以提供本地新闻内容推送和天气报告;商店或餐馆可精确地为附近用户提供优惠活动和送货上门服务;电影网站可列出用户附近剧院正在播放的电影等。

除商业之外，HTML5地理定位技术在大众生活服务、社交、休闲娱乐方面应用也十分广泛。

2HTML5地理位置定位技术原理
HTML5地理位置定位技术原理包括：实现基于浏览器（无需后端支持）获取用户的地理位置技术;精确定位用户的地理位置（精度最高达10m之内，依赖设备）;持续追踪用户的地理位置;与Google Map或Baidu Map交互呈现位置信息。

本文是基于Baidu Map实现和HTML5交互位置信息。

利用HTML5提供的Geolocation、getCurrentPosition、Watchposition 3个API 实现用户位置的获取、定位与持续追踪，其具体实现如下。

21地理位置定位API
地理位置定位Geolocation API 提供确定浏览器用户所在位置的功能，并将地理位置信息发送给用户信任的站点。

例如，在百度地图搜索附近的银行，首先会根据用户所在的位置来定位，在此基础之上才能进行后续操作。

Geolocation API位于navigator对象中主要有getCurrentPosition（）、watchPosition（）、clearWatch（）3种函数成员[2]。

22getCurrentPosition（）于得到客户的地点信息
在函数成员getCurrentPosition（successCallback，errorCallback，{Geolocation 选项}）中，共有3个参数，第1个是成功的回调函数（successCallback），第2个是失败的回调函数（errorCallback），第3个是强调getCurrentPosition额外的选项。

1）successCallback指用户允许共享获取当前位置的回调函数，有的浏览器需要经过用户允许才可以实现位置共享，如果用户允许且成功获取位置信息的情况下才会执行successCallback回调函数，同时successCallback回调函数会接受一个参数用来表示获取的地理位置信息，当前参数里会包含一个属性coords，表示用户地理位置的信息参数。

coords下还具备几个子属性，用来表示用户设备所在位置的地理信息数据，包括经纬度、高度（altitude，相对于海平面即海拔）、速度（speed）等。

2）errorCallback指地理定位失敗的回调函数，主要用来处理错误，可能是用户不允许浏览器使用定位服务，也可能是用户允许情况下获取地理位置信息失败。

这两种情况下会执行errorCallback回调函数。

该函数也包含一个参数，通常定义为“error”，当然，可以根据需求灵活改变参数名称，其中主要包含的错误信息及错误代号等相关内容[3]，error里面的属性主要有：
Message：用来说明具体的错误是什么
CODE：错误代号，适用于精确匹配错误时使用，通过其包含不同的错误代号来提示给用户不同内容
PERMISSION_DENIED：用户不允许使用地理定位
POSITION_UNAVILABLE：允许使用地理定位前提下却无法获取用户当前位置
TIMEOUT：操作超时
3）Geolocation选项定义了获取用户地理位置的某些辅助功能属性，每种属性实现的功能也不一样，例如，是否启用高精度匹配，是否定义超时时间等。

这些属性的含义为：
enableHighAccuracy：表示浏览器获得地理位置有着最高的精度等级，其值为true或false，不明确定义时值是false。

可能一些设备不指定高精度获取位置可能会产生位置偏差，所以建议尽可能将这一属性设置为true，如果将其属性设置为true得到所需地理信息的时间就会相对较长。

Timeout确立得到地理位置的时间域值，不定义表示不限时。

设置这一属性，在规定的时间内未成功获取用户地理位置将产生错误，即调用errorCallback回调函数的时间，单位为毫秒（ms）。

maximumAge——最大存活周期，在循环得到地点信息相关数据时，这个参数确立间隔多长时间获取一次地理信息数据。

不指定时值为0，表明浏览器立即计算得到新的地理数据信息。

2.3Watchposition（）持续追踪用户位置
Watchposition（）像一个位置追踪器，通常与Clearwatch（）一起来使用，类似于JavaScript中setInteval和clearInteval的工作方式。

調用Watchposition（）的方法：var
watch=navigator。

watchPosition（success_callback、error_callback选项），其中包含的内容依然是uccess_callback、error_callback和Geolocation选项，也就是说getCurrentPosition中的参数拿到Watchposition（）中依然可以使用，需要注意的是需要将其保存之后才可以使用Clearwatch（）。

2.4Clearwatch（）停止获取用户位置
Clearwatch（）清除位置追踪，它的语法规范就是Clearwatch（watch），使用时将之前保存的watch对象代入即可。

3HTML5地理定位技术的实现过程
随着位置服务在大众的生活、社交、休闲娱乐方面的深入应用，HTML5定位技术越来越多地嵌入到电子商务网站、新闻站点、商店、餐馆或电影网站等需要获取用户位置的平台以实现商业利益的最大化。

而在这些网站中，用户主要利用百度地图、谷歌地图和HTML5实现交互来获取的用户的位置、定位以及持续追踪。

但是谷歌地图由于服务原因无法直接使用，因此
本文的HTML5地理定位技术实现过程借助于百度地图。

百度地图提供了完整的地图信息策略，可以根据用户指定的地理位置信息提供定位服务。

在操作之前需要申请百度秘钥（AK）：http：///map，通过百度地图相关js文件导入页面当中，再配上相应的AK就可以使用百度地图了[4]。

3.1如何使用百度地图API
1）百度地图对象
要在页面显示百度地图，第一步用div在页面中创建容器，进行ID赋值，可将百度地图显示在容器中。

百度地图对象叫做BMap（），使用时先创建BMap（）对象，再调用其Map （）函数进行地图初始化操作。

Map（）函数传递页面显示百度地图的元素ID作为参数，对地图进行初始化显示操作。

2）定位显示城市及缩放比例
在定位显示城市及缩放比例函数centerAnd Zoom（point/cityName，level）中，“center”表示中心，“Zoom”表示缩放比例，其中“point/cityName”参数说明百度地图使用是比较灵活的，可以根据传递的经纬度或城市名称来进行定位，“level”指缩放比例，可以根据实际来自行设置。

point可以通过new BMap.point（经度，纬度）函数进行说明定义，即point=new BMap.point函数传递经度和纬度两个值。

3.2获取设备地理位置
1）获取百度的Geolocation对象
通过getCurrentPosition事件来添加回调函数，并通过position参数获取当前地理位置信息十分方便。

具体来说，在代码geolocation.getCurrentPosition（function（position）{}）;中的function（）匿名函数作为回调函数，position参数作为用户设备当前位置信息，也就是说当百度地图获取到用户地理位置后会将位置信息赋值于position参数当中[5]。

另一方面，我们可以通过geolocation的getStatus（）来判断地理位置获取成功或失败的原因。

2）position参数
position参数主要功能是用来获取当前设备的地理位置，共有如下3个重要属性：
Position.point：当前地理坐标对象
Position.point.lng：当前位置的经度信息
t：当前位置的纬度信息
3）创建坐标
创建标点的作用是显示用户所在位置，我们可以通过百度地图API中的marker函数来完成，即Var marker=new BMap.Marker（point），其中point以经纬点作为参数，将坐标点添加到地图上，其函数为map.addOverlay（marker），用来接收marker作为参数，可将创建好的坐标点放到地图上[6]，并通过map.panTo（point）函数将地图中心移动到指定标点上。

4结束语
随着移动通信的发展和移动智
能终端设备的普及，用户对地理位置跨平台、跨终端服务的需求愈加旺盛。

HTML5的跨平台地理位置定位技术在用户允许的前提下识别用户位置并且可以分享给他人，优势在于通过浏览器能避免不同平台和操作系统的限制，且用户无需进行任何下载操作，适应移动时代的发展趋势。

参考文献：[1]黄永慧，陈程凯.HTML5在移动应用开发上的应用前景[J].计算机技术与发展，2013，23（7）：207210.
[2]龚丽.HTML5中的地理定位技术探究[J].软件导刊，2015，14（11）：3032.
[3]连政.基于HTML5技术的移动Web前端设计与开发[D].杭州：浙江工业大学，2014.
[4]鲁立，刘桢.基于HTML5地理定位技术的移动终端导航设计[J].电子设计工程，2012，20（22）：120122.
[5]刘天寅.HTML5与未来的WEB应用平台[J].阴山学刊（自然科学），2010，24（2）：8690.
[6]胡晶.基于HTML5的Web移动应用开发研究[J].工业控制计算机，2014，27（10）：8081.。