geolocation属性了解

说起geolocation属性,那么你有必要知道window的navigator 属性新增的一个属相,用来获取用户所在的地理信息。
先说说navigator属性的Navigation对象:浏览该页面使用的浏览器,不同平台信息不一致。以下是打印navigation对象信息内容。注意划线处的Geolocation属性哦!这可是本次出场的主角啊!

var browser = "当前的浏览器信息是:\n";
// 遍历该浏览器的全部属性
for (var propname in window.navigator) {
    // 将所有属性名、属性值连缀在一起
    browser += propname + ": " + window.navigator[propname] + "<br>"
}
document.writeln(browser);

在这里插入图片描述
可以拉近镜头看看Geolocation,欣赏下主角内在气质,无非是3大品质,不急我们先大致了解下。

在这里插入图片描述

方法作用
getCurrentPosition(data,error,options)获取当前地理位置信息
watchPosition(data,error,options)持续监听地理位置信息。返回一个唯一标记该位置的监听器ID
clearWatch (watchId)停止持续监听地理位置信息,获取该监听器ID,停止监听
1. getCurrentPosition获取地理位置

getCurrentPosition(data,error,options):3个参数分别是成功时调用,失败时调用,其他选项。

  1. 地理位置获取成功时调用回调函数
function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
}

以上的回调函数中的position代表浏览器所获取地理位置信息。包含timeStamp和coords两个属性。
timeStamp:返回获取地理位置时的时间。
coords:返回coordinates对象。该对象包含了地址位置信息

属性作用
coords.longitude纬度值
coords.latitude纬度值
coords.accuracy经纬度的精度值,单位米
coords.altitude高度值
coords.altitudeAccuracy高度的精度值,单位米
coords.heading设备移动方向,以正北顺时针转过来角度表示,不能获取时为null
coords.speed设备移动速度,不能获取速度时为null
coords.timestamp获取地理位置的时间戳
  1. 地理位置获取失败时调用
function(error) {
}

以上的回调函数中的error代表位置获取失败时错误信息。error对象包含code及message属性
message:返回错误描述信息,但大多数浏览器不支持,所以你要自己定义。
code:返回的错误代码。

code含义
1用户拒绝获取位置信息
2无法获取位置信息
3获取地理位置信息超时

获取地理信息属于隐私,大多数用户会拒绝。

  1. 可选参数,获取地理位置时其他选项。
属性作用
enableHighAccuracy指定是否要求高精度地理位置信息
timeout获取位置时超时
maximumAge指定地理位置缓存时间,单位毫秒
  <script type="text/javascript">

  //成功是回调函数
    var getPostion=function(postion){
      console.log('成功调用',error)
      //获取地理位置时的时间:
      let geologyTime=postion.timestamp;

      //postion.coords:返回coordinates对象,包含地理位置信息,遍历该对象
      for(let prop in postion.coords){
        console.log(prop+':'+postion.coords[prop]);
      }
    }

  //失败时回调函数
  var errorMsg=function(error){
    console.log('失败调用',error)
    let msg={
      1:'用户拒绝获取地理位置',
      2:'无法获取地理位置信息',
      3:'获取地址位置信息超时'
    }
    console.log('报错原因',msg[error.code]);
  }  
var geo_options = {
  enableHighAccuracy: true, 
  maximumAge        : 30000, 
  timeout           : 27000
};
  
  navigator.geolocation.getCurrentPosition(getPostion,errorMsg,geo_options );

  </script>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值