首页

地理位置定位原理介绍

kkcode
2019-01-01  阅读 756

地理位置定位原理介绍

地理定位的几种方式

  • IP地址
  • GPS
  • WiFi
  • GSM/CDMA

地理定位获取流程:

  1. 用户打开需要获取地理位置的web应用
  2. 应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。
  3. 假设用户允许,浏览器从设备查询相关信息。
  4. 浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。

HTML5地理位置的实现:

  1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术
  2. 精确定位用户的地理位置(精度最高达到10m之内,依赖设备)
  3. 持续追踪用户的地理位置
  4. 与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个方法

  1. getCurrentPosition 当前位置
  2. watchPosition 监视位置
  3. 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 告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的GPSWIFI,值为true时,浏览器会尝试启用这些设备,默认为true
  • timeout 获取位置信息时超出设定的这个时长,将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT

2. watchPosition

watchPosition像一个追踪器与clearWatch成对。watchPositionclearPosition有点像setIntervalclearInterval的工作方式。但是其只针对移动设备。

var wPId = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch( wPId );复制代码
本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】
排序: 时间 投票

点个赞

2020-02-03 回复