浏览器H5获取地理位置api——navigator.geolocation

2023-11-12

地理位置 API(Geolocation API)允许用户向 web 应用程序提供他们的位置。出于隐私考虑,报告地理位置前会先请求用户许可。

PS:出于安全考虑,当网页请求获取用户位置信息时,用户会被提示进行授权。注意不同浏览器在请求权限时有不同的策略和方式。Windows 10 在未开启定位的情况下无法获取位置。

  • Geolocation.getCurrentPosition():检索设备的当前位置。
  • Geolocation.watchPosition():注册一个处理函数,在设备位置发生改变时都会自动调用,并返回改变后的位置信息。

对于上述的几种方法,其回调函数最多有三个参数:

  • 一个必须的成功的回调函数:如果位置检索成功,则调用该回调函数,并以 GeolocationPosition 对象(用于提供位置数据)作为其唯一的参数。
  • 一个可选的错误回调函数:如果位置检索失败,则调用该回调函数,并以 GeolocationPositionError 对象(用于提供访问出错的信息)作为其唯一的参数。
  • 一个可选的对象:用于提供检索位置数据的选项。

获取当前位置
你可以调用 getCurrentPosition() 函数获取用户当前定位位置。这会异步地请求获取用户位置,并查询定位硬件来获取最新信息。当定位被确定后,定义的回调函数就会被执行。你可以选择性地提供第二个回调函数,当有错误时会被执行。第三个参数也是可选的,你可以通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位。

navigator.geolocation.getCurrentPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});

监视定位
你可以设定一个回调函数来响应定位数据发生的变更(设备发生了移动,或获取到了更高精度的地理位置信息)。你可以通过 watchPosition() 函数实现该功能。它与 getCurrentPosition() 接受相同的参数,但回调函数会被调用多次。错误回调函数与 getCurrentPosition() 中一样是可选的,也会被多次调用。

const watchID = navigator.geolocation.watchPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});
navigator.geolocation.clearWatch(watchID);

调整返回结果

function success(position) {
  const latitude  = position.coords.latitude; //十进制数的纬度
  const longitude = position.coords.longitude; //十进制数的经度
  const accuracy = position.coords.accuracy; //所提供的以米为单位的经度和纬度估计的精确度
  const altitude = position.coords.altitude; //海拔,海平面以上以米计
  const altitudeAccuracy = position.coords.altitudeAccuracy; //所提供的以米为单位的高度估计的精确度
  const heading = position.coords.heading; //宿主设备当前移动的角度方向,相对于正北方向顺时针计算
  const heading = position.coords.speed  以米每秒为单位的设备的当前对地速度
  // 使用 latitude 和 longitude 做些什么
}

function errorCallback(error) {
  switch (error.code) {
    case 1: log('用户拒绝对获取地理位置的请求'); break;
    case 2: log('位置信息是不可用的'); break;
    case 3: log('请求用户地理位置超时'); break;
    default: log('other Error')
  }
}

const options = {
  enableHighAccuracy: true, //启用高精确度模式,这个参数通知浏览器启用HTML5
  maximumAge: 30000, //表示浏览器重新计算位置的时间间隔,单位为ms,默认值为零,这意味着浏览器每次请求都必须重新计算位置
  timeout: 27000, //超时限制(单位为毫秒)。如果在该时间内为获取到地理位置信息,则返回错误
  Geolocation: true //服务的高精确度模式,默认值为false
};

const watchID = navigator.geolocation.watchPosition(success, errorCallback, options);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

浏览器H5获取地理位置api——navigator.geolocation 的相关文章

  • 如何阻止直接访问我的 JavaScript 文件?

    我使用 Minify 来缩小并缓存所有脚本请求 我只希望我的用户能够访问 JavaScript 文件的缩小版本 缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
  • JavaScript 添加布尔值

    console log true true 2 console log typeof true true number console log isNaN true true false 为什么两个布尔类型相加会产生一个数字 我有点理解 如
  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u

随机推荐

  • 快速实现M5311NBIOT MQTT通信

    NBIOT MQTT接入ONE NET云平台 一 本例程实现功能介绍 三 硬件接线图 材料清单 四 完整代码 代码解析 前言 MQTT是一种基于TCP的物联网通信协议 在物联网领域应用非常广泛 基本上所有的云平台都支持设备以MQTT协议接入
  • 如何看懂照片的直方图?

    直方图的观看规则就是 左黑右白 左边代表暗部 右边代表亮部 而中间则代表中间调 纵向上的高度代表像素密集程度 越高 代表的就是分布在这个亮度上的像素很多 上图为例 对于一张 正常 的照片来说 直方图应该是中间高两边低 amp lt img
  • 龙芯笔记

    1 用交叉编译器编译时 也会出现找不到sqlite3 h头文件的情况 需要把sqlite3 h这个头文件放到交叉编译工具目录下的 include 2 mips64el redhat linux g sqlite c lm o sql tes
  • SVM 二分类与模型评估参数

    code 正常输出中文 import io import sys sys stdout io TextIOWrapper sys stdout buffer encoding utf 8 Accuracy AUC Recall Precis
  • 电脑连接KONICA MINOLTA(柯尼卡美能达) 打印机及驱动安装

    电脑系统 Windows 7 安装的打印机型号 Konica minolta bizhub 363 驱动下载 https www konicaminolta com cn support drivers index html 打印机配置好网
  • 财务模块 - 采购、接收、应付会计分录和功能认识

    一 企业采购业务 采购业务是一般企业都会有的业务 主要包括请购 采购 接收 入库 发票 付款几个步骤 分别对应采购 库存 成本 应付以及总账模块 Oracle是财务业务一体化的系统 只要录入了相应的业务 则会自动生成相应的财务信息 1 采购
  • c#观察者模式和事件委托的联合使用

    using System using System Collections Generic using System Linq using System Text using System Threading Tasks 观察者模式和事件委
  • 人才盘点:盘活人力资本的价值

    导读 人才是企业发展的第一资源 也是推动科技进步 创新驱动和提高核心竞争力的关键因素 随着科技日新月异的发展 一些传统产业正面临深度调整甚至颠覆性改变 在这种背景下 企业更应当关注存量人才的配置合理性 培养有市场前瞻和创业精神的高素质人才
  • cookie httponly

    Java 中的JSESSIONID的cookie 默认是httponly 具体啥是httponly 设置cookie为httponly将无法被javascript读取到 所以默认情况下JavaScript是无法通过读取JSESSIONID的
  • Eclipse 导入Go项目

    用Eclipse开发Java的程序员 一想到导入项目 首先是Import 但是发现点击import后 导入不了go项目 所以采用新建的方式来导入Go项目 这个前提是要搭建好Eclipse中Go开发环境 这些有很多可以百度 这里只描述Go项目
  • 发布依赖到maven中央仓库

    目录 前言 一 jira 1 注册 2 新建问题 3 新建关键表单配置 4 问题页面 5 Group id 对应的 域名认证 二 gpg秘钥配置 1gpg下载 三 maven项目配置 也可以看官方文档 1 setting xml 2 pom
  • Linux 查看服务器内存、CPU 命令

    1 服务器CPU情况 cat 1 查看物理CPU个数 Procs 进程 cat proc cpuinfo grep physical id sort uniq wc l 2 查看服务器CPU内核个数 cat proc cpuinfo gre
  • 关于若依框架中v-hasRole/v-hasPermi作用到el-table-column中无法生效问题

    在某些情况下 它是不适合使用v hasPermi 如元素标签组件 只能通过手动设置v if 可以使用全局权限判断函数 用法和指令 v hasPermi 类似
  • 静态链表基本操作

    增 删 查找位序下标 查找空元素操作 next 1为表最后一个元素 next 2为空元素 define CRT SECURE NO WARNINGS include
  • 如何选择合适的 API 网关

    如今 API 网关是设计具有多个 API 服务或微服务的分布式系统架构的重要组成部分 这篇文章帮助您了解什么是 API 网关 何时以及为何使用它 并指导您如何为您的应用程序选择最佳的 API 网关解决方案 什么是 API 网关 API 网关
  • 06-Java框架-SpringBoot

    一 SpringBoot介绍 之前为了搭建一个SSM的项目 需要导入各种jar包和添加各种xml的配置 相对来时是较为复杂的 SpringBoot倡导的是几乎0配置搭建Spring应用 官网 https spring io projects
  • 卷麻了,新来的00后实在是太卷了...

    在程序员职场上 什么样的人最让人反感呢 是技术不好的人吗 并不是 技术不好的同事 我们可以帮他 是技术太强的人吗 也不是 技术很强的同事 可遇不可求 向他学习还来不及呢 真正让人反感的 是技术平平 却急于表现自己的人 每天加班到12点 在老
  • 数据结构知识点总结

    一 顺序表和链表 1 顺序表 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构 一般情况下采用数组存储 在数组 上完成数据的增删查改 静态顺序表 使用定长数组存储 动态顺序表 使用动态开辟的数组存储 常用 2 链表 链表是一种
  • node settings must not contain any index level settings

    本人安装的ES是7 6 1版本 报错意思为 节点设置不能包含任何索引级别设置 也就是说报错是因为 在elasticsearce yml文件中对索引进行了配置 应该是新版本不支持这样配置 删除相应的索引配置即可 index refresh i
  • 浏览器H5获取地理位置api——navigator.geolocation

    地理位置 API Geolocation API 允许用户向 web 应用程序提供他们的位置 出于隐私考虑 报告地理位置前会先请求用户许可 PS 出于安全考虑 当网页请求获取用户位置信息时 用户会被提示进行授权 注意不同浏览器在请求权限时有