头图

HTML5(二)——获取用户位置Geolocation

前端知识搬运工

地图类、打车、外卖等类型的手机APP,一进入便咨询是否允许获取我们的位置,允许之后会根据我们所在位置推荐好物,逐渐地 H5 网页也开始获取用户位置。Geolocation是 H5 新增的对象,用于定位。常见打开网页有两种方式:移动端和PC端。它们是根据什么如何定位的呢?

  1. IP定位:通过IP地址定位,由于没有硬件支持,主要是服务器根据 IP库判断所处位置,所以精度差。
  2. GPS(全球定位系统):使用GPS定位,定位时间长,耗电量大,但是精度高。
  3. WIFI定位:wifi 定位数据是通过三角距离计算得到,三角是指当前多个接入wifi用户的已知距离,wifi在室内也非常准确。
  4. 手机地理位置:基于手机的地理定位数据是通过用户到一些基站的三角距离确定。这种方法可提供相当准确的位置结果。这种方法通常和基于WIFI基于GPS地位结合使用。
  5. 用户自定义:用户可以手动输入的地理位置。

Geolocation 方法

geolocation对象继承在navigator对象内,它有两种方法可以获取用户位置getCurrentPosition()和watchPosition(),还有clearWatch取消watchPosition。

getCurrentPosition:获取一次位置

navigator.geolocation.getCurrentPosition(success=>{
 console.log(success.coords)//包含位置的经纬度、速度、海拔、经纬度精度、海拔精度信息
},fail=>{
 console.log(fail)//获取失败的原因
},{
 //可增加的4个配置参数
  enableHighAccuracy:true,//高精度
  timeout:5000,//超时时间,以ms为单位
  maximumAge:24*60*60*1000,//位置缓存时间,以ms为单位
})

位置获取成功后返回的 success.coords 的属性

  • coords.latitude - 纬度
  • coords.longitude - 经度
  • coords.altitude - 海拔
  • coords.speed - 速度
  • coords.accuracy - 经纬度精度
  • coords.altitudeAccuracy - 海拔精度
  • coords.heading - 方向,从正北开始的弧度数
  • watchPosition:不断获取位置
navigator.geolocation.watchPosition(
 success=>{
  console.log(success.coords)//包含用户位置速度海拔等信息
 },
 fail=>{
  console.log(fail)//定位失败原因
 },
 {
  enableHighAccuracy:true,//高精度
  timeout:60*1000,//超时,以ms为单位
  maximumAge:24*60*60*1000,//位置缓存时间,以ms为单位
  frequency:1000,//获取频率
 }
)

位置获取成功后返回的 success.coords 的属性与上述getCurrentPosition的一致。它两唯一的区别就是一个获取一次,另外一个获取多次,多了一个获取频率参数。

clearWatch(): 取消当前位置的获取,停止 watchPosition 方法。

clearWatch 与 js 中的clearInterval类似,clearInterval用于清除定时器。使用时语法如下:

var wPId = navigator.geolocation.watchPosition(
 success=>{
  console.log(success.coords)//包含用户位置速度海拔等信息
 },
 fail=>{
  console.log(fail)//定位失败原因
 },
 {
  enableHighAccuracy:true,//高精度
  timeout:60*1000,//超时,以ms为单位
  maximumAge:24*60*60*1000,//位置缓存时间,以ms为单位
  frequency:1000,//获取频率
 }
)
navigator.geolocation.clearWatch(wPId)

Geolocation 应用

由于该特性可能侵犯用户的隐私,使用时自动会询问用户是否同意授权位置,除非用户同意,否则无法获取到用户位置。

function getPosition(){
 if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(function(res){
   console.log("res",res)//位置信息
  },function(err){
   console.log("err",err)
  })
 }
}
getPosition()

在电脑上,直接使用浏览器打开文件,浏览器立马弹出如下显示框:

点击禁止后,调试器中打印出报错信息,报错信息为:

{
code: 1
message: "User denied Geolocation" //用户拒绝地理位置
}

点击允许之后,发现并未打印出位置信息,什么原因呢?PC是根据电脑的IP地址来解析位置的,此时直接打开文件没有域名或ip,所以无法获取位置,必须把文件放到服务内,如果你是不会起服务可以下载nginx,下载安装成功之后文件放入html文件夹内,启动nginx就可以访问了。

启动本地服务,再次获取位置之后,发现依旧报错,无法返回位置,报错信息为:

{
 code: 1, 
 message: "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)."//只允许安全来源
}

意思就是只能在https域名下才可以哦!

还需要注意的是chrome的google浏览器也不能获取位置,但是IE浏览器可以获取到。

把上述案例放到线上,获取位置只要用户点击同意就没有问题啦!

除此之外,带有位置的我们经常会用到输入位置,在地图中自动标记一个点,移动标记点到更具体的位置,如图:

一般需要绘制地图的时候,我们就借助三方的百度、高德、腾讯等地图,注册账号,申请密钥才可以使用。

阅读 133

专注前端开发技术分享,助力初学者更好成长!

4 声望
0 粉丝
0 条评论
你知道吗?

专注前端开发技术分享,助力初学者更好成长!

4 声望
0 粉丝
宣传栏