html5新特性-获取您的地理位置

简介

Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法。且目前看来浏览器的支持情况还算不错(因为新版本的IE支持了该API),这使得在不久之后就可以使用这一浏览器内置的API了。该API接口提供的用户地理位置信息还算蛮详细的,经纬度啊,海拔啊,精确度,移动速度啊都是可以获取的。

据我个人的了解,其位置的获取是通过收集用户周围的无线热点和您 PC 的 IP 地址。然后浏览器把这些信息发送给默认的位置定位服务提供者,由它来计算您的位置。最后用户的位置信息就在您请求的网站上被共享出来

其实严格来说,Geolocation不是HTML5规范的一部分,不过W3C为其独立出了一份详细的规范,应该算是浏览器级别的api

浏览器支持

目前W3C地理位置API被以下桌面浏览器支持:

  • Firefox 3.5+
  • Chrome 5.0+
  • Safari 5.0+
  • Opera 10.60+
  • Internet Explorer 9.0+

W3C地理位置API还可以被手机设备所支持,如下:

  • Android 2.0+
  • iPhone 3.0+
  • Opera Mobile 10.1+
  • Symbian (S60 3rd & 5th generation)
  • Blackberry OS 6
  • Maemo

地理定位api的相关函数

用的最多的getCurrentPosition() 来获取用户位置

下面我举了一个基于百度地图api的例子,查看demo

http://www.huolg.net/html5/app/geo.html

(源码直接自己看吧,不过貌似只能在PC上起效果,手机上我发现不行,如果有行的童鞋私信我吧,另外这个误差感觉有点大,能够精准定位到你所在城市,我在电信和移动网络分别尝试了下,电信的更精准,移动的误差比较大的)

其它函数:

watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。

clearWatch() - 停止 watchPosition() 方法

getCurrentPosition、watchPosition的参数说明(这两个函数参数是一样的)navigator.geolocation.getCurrentPosition(success_callback, error_callback, {geolocation选项});第一个参数是用户允许浏览器共享geolocation成功后的回调方法第二个参数是用获取地理位置信息失败的处理方法,传入错误对象,包含code、message两个属性第三个参数都是geolocation选项,所有的geolocation选项都是可选的,它包含的属性如下:

enableHighAccuracy

Boolean型,默认为false,是否尝试更精确地读取纬度和经度,移动设备上,这可能要使用手机上的GPS,这会消耗移动设备更多的电量

timeout

单位为毫秒,默认值为0,在放弃并触发处理程序之前,可以等待的时间----用户选择期间是不计时的

maximumAge

单位为毫秒,默认值为0。用来告诉浏览器是否使用最近缓存的位置数据,如果在maximumAge内有一个请求,将会返回它,而不请求新位置。 maximumAge如果为Infinity,则总是使用一个缓存的位置,如果为0则必须在每次请求时查找一个新位置

getCurrentPosition的参数success_callback(成功获取位置的回调函数),它包含两个属性:coords、timestamp

coords属性有以下7个值

1、accuracy 准确角2、altitude 海拔高度3、altitudeAcuracy 海拔高度的精确度4、heading 行进方向5、speed 地面的速度6、latitude 纬度7、longitude 经度

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
发表新评论