关于h5页面手机访问获取用户地理位置的功能——Geolocation位置API

5 篇文章 0 订阅
2 篇文章 0 订阅

Geolocation是由H5提供的新的获取用户使用的设备的地理位置的API,它可以让访问者在访问当前页面的时候,经过用户同意获取访问者当前的地理坐标位置。
此属性只能在网站为https的协议下运行

他提供了三个有效的方法,geolocation属于navigator对象下的一个子对象,所以调用的时候需要通过navigator来进行调用。

getCurrentPosition()

确定设备的地理位置并且返回一个携带地理位置信息的Position对象,语法:

navigator.geolocation.getCurrentPosition(success(pos), error(err), options);

参数说明

success

获取地址成功以后的回调函数,调用此函数会提供一个position作为参数,此参数存储了坐标等信息

error

获取坐标位置失败后的回调函数,调用此函数也会提供一个positionerror作为参数,该参数包含了失败的原因

options

一个可选的配置获取信息方式的参数,该参数是以对象的形式传入,可以设置三个有效的值

options = {
     enableHighAccuracy: true, 
     timeout: 5000,
     maximumAge: 0
};
enableHighAccuracy

布尔值,取值true表示使用最高精度的位置(需要设备的支持),false表示是用最短的时间来返回位置同时消耗电量要少很多。

timeout

以毫秒为单位的长度之,表示设备会在该时间内等待返回地理位置,如果超出将不再等待,默认值是Infinity

maximumAge

表示上此次获取的位置的缓存过期时间,取值为0表示获取位置不适用缓存值,而是每次获取一个最新的地理位置。取值Infinity表示设备一直使用缓存的坐标位置。默认为0.

watchPosition()

给设备绑定一个监听器,用来监听设备的地理位置发生变化后的处理方法。
该函数类似于setTimeout,能够返回一个id值,表示当前监听的id,可以使用clearWatch方法取消监听。

var id = navigator.geolocation.watchPosition(success(pos), error(err), options);

此方法的参数和getCurrentPosition方法一样,这里就不赘述。

clearWatch()

用于清除一个位置监听id,类似于clearTimeout方法

navigator.geolocation.clearWatch(id)

参数

id表示要清除的监听位置的id。

Position

主要是用来当设备获取到用户的地理位置后供回调函数返回的一个对象,该对象包含了一个关于Coordinates坐标位置的对象,和一个返回位置的时间戳值

navigator.geolocation.getCurrentPosition(function(pos){
    let coord = pos.coords;
    let tims = pos.timestamp;
});

coords

是一个Coordinates对象,其中包括了很多关于位置的信息

latitude

当前地理位置坐标的维度信息值,是一个16进制的值

longitude

当前地理位置坐标的经度值,是一个16进制的值

altitude

当前地理位置的海平面高度,也就是海拔高度,以米为单位表示

accuracy

返回表示纬度和经度属性精度的双精度值,以米为单位

altitudeAccuracy

返回一个表示海拔高度精度的双精度值,以米为单位。此值可以为空。

heading

返回一个表示设备运行方向的双精度值。该值以度为单位,表示设备与正北航向的距离。0度代表正北,方向是顺时针方向确定的(这意味着东90度,西270度)。如果速度为0,则航向为NaN。如果设备无法提供标题信息,则此值为空。

speed

返回一个表示设备速度的双精度值,单位为米/秒。此值可以为空。

limestamp

返回后去地理位置的时间戳
示例

// 首先定义一个获取位置的函数
var getLocation = function () {
    // 判断浏览器是否支持该属性
    if (navigator.geolocation) {
        // 如果支持调用获取位置的方法,并且给他出入一个成功后的回调方法,和失败后的回调方法
        navigator.geolocation.getCurrentPosition(displayPosition, locationError);
    } else {
        alert('浏览器不支持地理定位。');
    }
}
// 当获取位置成功后执行该函数,并且把获取的信息传给函数作为参数
var displayPosition = function (pos) {
    // 这里通过结构赋值拿到经纬度信息
    let {latitude, longitude, altitude, accuracy, altitudeAccuracy, heading, speed } = pos.coords;
    console.log(`经度:${longitude}`);
    console.log(`维度:${latitude}`);
    console.log(`海拔度:${altitude}`);
}
// 当前位置获取失败的回调函数
var locationError = function (error) {
    switch (error.code) {
        case error.TIMEOUT:
            Error('获取位置超时,请再次请求');
            break;
        case error.POSITION_UNAVAILABLE:
            Error('无法获取您的位置');
            break;
        case error.PERMISSION_DENIED:
            Error('没有授权获取地理位置,请授权');
            break;
        case error.UNKNOWN_ERROR:
            Error('未知的错误');
            break;
    }
}
// 开启一个位置监听
var id = navigator.geolocation.watchPosition(success(pos), error(err), options);
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值