IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 关于h5页面手机访问获取用户地理位置的功能——Geolocation位置API -> 正文阅读

[JavaScript知识库]关于h5页面手机访问获取用户地理位置的功能——Geolocation位置API

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);
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-04 15:27:11  更:2022-03-04 15:29:37 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 9:08:48-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码