HTML5 Geolocation地理定位

 

作为一个小小的程序员总是要满足客户各种千奇百怪的需求,这不,这几天我们的客户要实现一个根据页面定位,根据定位...



作为一个小小的程序员总是要满足客户各种千奇百怪的需求,这不,这几天我们的客户要实现一个根据页面定位,根据定位后的城市显示商品信息的功能,乍一听这玩意还挺高大上的,那这玩意做出来多有成就感啊!回到现实想了一下,这个东西需要两个步骤来实现,首先要获取位置信息,然后根据位置信息匹配显示商品。 但是问题来了,地理位置怎么获取呢?之前没有这方面的经验。咱不会可以上网搜啊,经过搜索之后发现,原来有一个HTML5 Geolocation API可以用来获得用户的地理位置。然后就去搜了一下Geolocation操作,找到以下信息:

getCurrentPosition(successCallback[,errorCallback] [,positionOptions])

API文档说getCurrentPosition是异步的,既然是异步的应该就会有回调函数,然后就看见一个参数successCallback,看名称应该就是回调函数,查询之后果然没错,第一个参数就是成功后的回调函数,至于后面两个,作为程序员的我一眼就看出这两个是可选参数,具体怎么用不知道,查了一下知道,这两个分别是错误回调函数和位置选项对象

successCallback为获取位置信息成功的回调函数,返回的数据中包含经纬度等信息,具体如下:

coords对象中的属性:

latitude纬度坐标;

longitude    经度坐标;

accuracy    经纬度的精确度(单位为米);

altitude    (可选)如果能够获取,返回海拨高度;

altitudeAccuracy    (可选)海拨高度的精确度;

heading    (可选)如果能够获取,返回相对北面的指向角度;

speed   (可选)如果能够获取,返回速度;

timestamp对象         当前的本地时间和日期

看完了这个API,觉得也不是很难嘛,决定还是试一下再说,理了下思路写下了如下代码:



怀着激动的心情打开了网页,然后浏览器弹出了提示"是否共享其位置信息",那肯定要点是的了。当我看到数出来的经度纬度值我就乐了。原来听起来高大上的东西做起来就这么简单!

地理位置获取到了,剩下的就是根据地理位置获取城市信息了,根据之前的项目经验,借助第三方服务来把坐标转换一下,百度地图,腾讯地图或谷歌地图都可以。这里以百度地图为例,修改代码如下:



来看一下百度地图返回的值:



这样城市信息就得到了,再根据城市信息显示商品。OK!完成任务。生活多么美好啊!

自从学了HTML5的Geolocation,妈妈再也不用担心我获取地理位置了,That's so easy!


    关注 web前端开发之家


微信扫一扫关注公众号

0 个评论

要回复文章请先登录注册