点个赞
地理位置定位原理介绍
地理位置定位原理介绍
地理定位的几种方式
- IP地址
- GPS
- WiFi
- GSM/CDMA
地理定位获取流程:
- 用户打开需要获取地理位置的web应用
- 应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。
- 假设用户允许,浏览器从设备查询相关信息。
- 浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。
HTML5地理位置的实现:
- 实现基于浏览器(无需后端支持)获取用户的地理位置技术
- 精确定位用户的地理位置(精度最高达到10m之内,依赖设备)
- 持续追踪用户的地理位置
- 与Google Map 或者 Baidu Map 交互呈现位置信息。
HTML5中地理位置定位的方法
关于Geolocation对象
Geolocation API 用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是否允许获取当前位置。
哪些浏览器支持Geolocation API IE9.0+、FF3.5+、Safari5.0+、Opera10.6+、Iphone3.0+、Android2.0+
if(navigator.geolocation){
alert('浏览器支持 geolocation');
}else{
alert('浏览器不支持 geolocation');
}复制代码
Geolocation API存在于navigator对象中,只包含3个方法
getCurrentPosition
当前位置watchPosition
监视位置clearWatch
清除监视
1.getCurrentPosition
getCurrentPosition(success, error, option)方法最多可以有三个参数
success
是成功获取位置信息的回调函数,它是方法唯一必须的参数;error
是用于捕获位置信息出错的情况option
是配置项
// 第一个参数
navigator.geolocation.getCurrentPosition(function(p){
console.log('经度' + p.coords.longitude);
console.log('纬度:' + p.coords.latitude);
console.log('准确角' + p.coords.accuracy);
console.log('海拔高度' + p.coords.altitude);
console.log('海拔高度的精确度' + p.coords.altitudeAcuracy);
console.log('行进方向' + p.coords.heading);
console.log('地面速度' + p.coords.accuracy);
console.log('国家' + p.address.country);
console.log('省份' + p.address.region);
console.log('城市' + p.address.city);
})
// 第二个参数
navigator.geolocation.getCurrentPosition(...,function(error){
switch(error.code){
case error.TIMEOUT:
alert('连接超时,请重试');
break;
case error.PERMISSION_DENIDE:
alert('您拒绝了使用位置共享服务');
break;
case error.POSITION_UNAVAUKABKE:
alert('您所在的星球不提供位置服务');
break;
}
})
// 第三个参数
navigator.geolocation.getCurrentPosition(...,...,{
enableHighAccuracy: true,
timeout: 1500
})复制代码
option配置项释义
enableHighAccuracy
告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的GPS
和WIFI
,值为true时,浏览器会尝试启用这些设备,默认为true
timeout
获取位置信息时超出设定的这个时长,将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT
。
2. watchPosition
watchPosition
像一个追踪器与clearWatch
成对。watchPosition
与clearPosition
有点像setInterval
和clearInterval
的工作方式。但是其只针对移动设备。
var wPId = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch( wPId );复制代码
本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】