使用navigator.geolocation来获取用户的地理位置信息
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
使用 navigator.geolocation 来获取用户的地理位置信息
W3C 中新添加了一个名为 Geolocation 的 API 规范,Geoloaction API 的作用就是通过浏 览器获取用户的地理位置。
我们可以使用 navigator.geolocation 来简单的获取用户 的地理位置信息。
本文中将简单介绍下 W3C 的 Geolocation。
Geolocation 在 javascript 的 navigator 对象中, 我们可以通过 navigator.geolocation 来使用它。
不支持 geolocation 的浏览器并不包含这一对象,那么可以通过下面的代码来做能力检测, 对不同的浏览器做不同的处理。
if (navigator.geolocation) { alert( ' 浏览器支持 geolocation ' ); }else{ alert( ' 浏览器不支持 geolocation ' ); }
在访问 geolocation 对象时,即调用 geolocation 下面的方法时,浏览器会弹出提示,询问 用户是否许可网站提供的位置服务,只有在得到用户许可过后,服务才会继续,否则将被停 止, 在稍后你将会了解到, 我们能够捕获到用户拒绝服务的动作。
下面这张图分别是 Chrome , Firefox 和 Opera 在初次访问 geolocation 时,给用户的提示:
初次使用 geolocation 时的警告框
常用的 navigator.geolocation 对象有以下三种方法:
1 2 3 获 取 当 前 地 理 位 置 : navigator.geolocation.getCurrentPosition(success_callback_function, 持 续 获 取 地 理 位 置 : navigator.geolocation.watchPosition(success_callback_function, 清除持续获取地理位置事件:navigator.geolocation.clearWatch(watch_position_id)
error_callback_function, position_options)
error_callback_function, position_options)
其中 success_callback_function 为成功之后处理的函数, error_callback_function 为失败之后返 回的处理函数,参数 position_options 是配置项,由 JSON 格式传入:
4 enableHighAccuracy:true/false,它将告诉浏览器是否启用高精度设备,所谓的高精度设备包含但 不局限于前面所提到的 GPS 和 WIFI, 值为 true 的时候, 浏览器会尝试启用这些设备, 默认指为 true, 在这种情况下,浏览器会尽可能地进行更为精确的查询,简单地说,如果用户有可用的 GPS 设备, 会返回 GPS 设备的查询结果,IP 是最后的选择,对于移动设备来说,网络接入点(基站)或许成为另
一个选择,对此我还没有完全了解,但根据测试,即时没有任何额外功能的手机,也能够得到更为精 确的查询结果。
5 6 maximumAge:单位毫秒,告诉设备缓存时间,主要用于设备的省电或者节省带宽方面。
timeout:单位毫秒,超时事件,获取位置信息时超出设定的这个时长,将会触发错误,捕获错误
的函数将被调用,并且错误码指向 TIMEOUT。
例如下面的代码:
var geo=navigator.geolocation.getCurrentPosition(geo_success, maximumAge:30000, timeout:27000}); geo_error, {enableHighAccuracy:true,
获取当前地理位置方法: 获取当前地理位置方法:navigator.geolocation.getCurrentPosition
当获得用户的许可过后,便一切就绪。
我们将通过 geolocation 下的 getCurrentPosition 方 法来获取用户当前的地理位置信息。
1、正确返回地理位置信息的处理函数 、 例如我们的成功处理函数这样写:
function getPositionSuccess( position ){ var lat = titude; var lng = position.coords.longitude; document.write( "您所在的位置: 经度" + lat + ",纬度" + lng ); }
处理函数中的 position 对象包含了用户的地理位置信息,该对象下面的 coords 子对象包含 了 用 户 所 在 的 纬 度 和 经 度 信 息 , 通 过 titude 可 以 访 问 纬 度 , 而 position.coords.longitude 中存放了经度的信息,用户的位置信息越精确,这两个数字后面的 小数点越长。
事实上,在 Firefox 中,position 对象下还附带有另一个 address 对象,这个 对象包含这个经纬度下的国家名,城市名甚至街道名,例如下面的代码:
function getPositionSuccess( position ){ var lat = titude; 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 其他返回信息:
7 8 9 coords.accuracy:返回经纬度的精度(米) coords.speed :速度 coords.altitude :当前的高度,海拔(米)
10 coords.altitudeAccuracy:高度的精度(米) 11 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个常量:
12 TIMEOUT:表示获取信息超时。
13 PERMISSION_DENIED:表示用户选择了拒绝了位置服务。
14 POSITION_UNAVAILABLE:表示位置不可知。
说明:而每一次出错时 error.code 将指向3个常量之中的一个。
移动设备持续获取地理位置方法: 移动设备持续获取地理位置方法:navigator.geolocation.watchPosition
对于使用移动设备的用户来说,位置并不是固定的, W3C 当然也考虑到了这一点, watchPosition 是一个专门用来处理这一情况的方法,watchPosition 被调用后,浏览器会跟 踪设备的位置,每一次位置的变化,watchPosition 中的代码都将会被执行。
对于致力于移 动设备 web 开发的同学来说,这个方法是及其重要的,它也许将会改变 web 移动客户端 的格局。
使 用 navigator.geolocation.clearWatch 既 可 以 清 除
navigator.geolocation.watchPosition 的监控事件。
Geolocation 实例演示
查看 Geolocation 实例演示
写在最后
定位一般采用的 wifi 会比较准确,采用 IP 的时候一般会定位到所在的城市中心,更多关于 地图定位的文章:
15 php 获取来访者 IP 信息 16 php、js 两种不同方式根据关键词返回经纬度接口【基于 Google map API】 17 根据 IP 返回地理位置地址以及地理经纬度的方法 18 基于 Google 地图的根据 IP 返回地理位置的接口
。