使用navigator.geolocation来获取用户的地理位置信息

W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。目前Firefox 3.5+/Opera 10.6+/Safari | Chrome 5 +/IE9 +都已经支持。
Geolocation在javascript的navigator 对象中,我们可以通过 navigator.geolocation 来使用它。

常用的navigator.geolocation对象有以下三种方法:

获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
持续获取地理位置:navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
清除持续获取地理位置事件:navigator.geolocation.clearWatch(watch_position_id)
其中success_callback_function为成功之后处理的函数,error_callback_function为失败之后返回的处理函数,参数position_options是配置项,由JSON格式传入:
enableHighAccuracy:true/false,它将告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI,值为 true 的时候,浏览器会尝试启用这些设备,默认指为 true,在这种情况下,浏览器会尽可能地进行更为精确的查询,简单地说,如果用户有可用的 GPS 设备,会返回 GPS 设备的查询结果,IP 是最后的选择,对于移动设备来说,网络接入点(基站)或许成为另一个选择,对此我还没有完全了解,但根据测试,即时没有任何额外功能的手机,也能够得到更为精确的查询结果。
maximumAge:单位毫秒,告诉设备缓存时间,主要用于设备的省电或者节省带宽方面。
timeout:单位毫秒,超时事件,获取位置信息时超出设定的这个时长,将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT。

例如下面的代码:

var geo=navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});

获取当前地理位置方法:navigator.geolocation.getCurrentPosition

当获得用户的许可过后,便一切就绪。我们将通过 geolocation 下的 getCurrentPosition 方法来获取用户当前的地理位置信息。

1、正确返回地理位置信息的处理函数

例如我们的成功处理函数这样写:

function getPositionSuccess( position ){
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        document.write( "您所在的位置: 经度" + lat + ",纬度" + lng );
}

处理函数中的position 对象包含了用户的地理位置信息,该对象下面的 coords 子对象包含了用户所在的纬度和经度信息,通过 position.coords.latitude 可以访问纬度,而 position.coords.longitude 中存放了经度的信息,用户的位置信息越精确,这两个数字后面的小数点越长。事实上,在 Firefox 中,position 对象下还附带有另一个 address 对象,这个对象包含这个经纬度下的国家名,城市名甚至街道名,例如下面的代码:

function getPositionSuccess( position ){
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        alert( "您所在的位置: 经度" + lat + ",纬度" + lng );
        if(typeof position.address !== "undefined"){
                var country = position.address.country;
                var province = position.address.region;
                var city = position.address.city;
                alert(' 您位于 ' + country + province + '省' + city +'市');
        }
}

coords其他返回信息:
coords.accuracy:返回经纬度的精度(米)
coords.speed :速度
coords.altitude :当前的高度,海拔(米)
coords.altitudeAccuracy:高度的精度(米)
coords.heading:朝向

2、返回错误时的处理函数

上面都是成功获取到用户位置信息的处理,但是出现问题的情况在所难免,当获取用户的位置信息出错时,传递到 getCurrentPosition 的第二个函数类型参数被调用,一个包含具体出错信息的对象会被传递进去,错误将被捕获。

function getPositionError(error){
	switch(error.code){
		case error.TIMEOUT :
			alert( " 连接超时,请重试 " );
			break;
		case error.PERMISSION_DENIED :
			alert( " 您拒绝了使用位置共享服务,查询已取消 " );
			break;
		case error.POSITION_UNAVAILABLE : 
			alert( " 亲爱的火星网友,非常抱歉,我们暂时无法为您所在的星球提供位置服务 " );
			break;
	}
}

error 对象下面,存放了3个常量:
TIMEOUT:表示获取信息超时。
PERMISSION_DENIED:表示用户选择了拒绝了位置服务。
POSITION_UNAVAILABLE:表示位置不可知。
说明:而每一次出错时 error.code 将指向3个常量之中的一个。

移动设备持续获取地理位置方法:navigator.geolocation.watchPosition

对于使用移动设备的用户来说,位置并不是固定的,W3C 当然也考虑到了这一点,watchPosition 是一个专门用来处理这一情况的方法,watchPosition 被调用后,浏览器会跟踪设备的位置,每一次位置的变化,watchPosition 中的代码都将会被执行。对于致力于移动设备 web 开发的同学来说,这个方法是及其重要的,它也许将会改变 web 移动客户端的格局。
使用navigator.geolocation.clearWatch既可以清除navigator.geolocation.watchPosition的监控事件。

完整实例:

js完整源码





“使用navigator.geolocation来获取用户的地理位置信息”的3个回复

  1. 支持博主,我又来逛逛啦!
    希望博主的网站越办越好!
    诚意与各位交换友情链接:http://www.supermalyhlj.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注