HTML DOM Geolocation coordinates属性

html dom 地理定位坐标属性用于获取用户设备在地球上的位置和海拔高度。用户必须批准他想要提供坐标,此属性才能工作。这样做是为了不损害用户的隐私。这可用于跟踪各种设备的位置。

属性

以下是坐标属性 –

注意 – 所有这些属性是只读的,并且返回类型为 double。

Sr.No th> 属性及描述

1 coordinates.latitude

返回设备位置的纬度(以十进制度为单位)。

2坐标.经度

返回设备位置的经度(以十进制度为单位)

3coefficients.altitude

立即学习“前端免费学习笔记(深入)”;

返回位置的海拔高度(以米为单位),相对到海平面。如果设备中没有 GPS,则可以返回 null。

4坐标。精度

返回纬度和经度属性的精度(以米为单位)

5coordinates.altitudeAccuracy

返回海拔属性的精度(以米为单位)6cocos.heading

返回设备行进的方向。该值(以度为单位)表示设备与正北航向的距离。 0度代表真北,方向按顺时针方向确定(东为90度,西为270度)。如果速度为 0,则航向为 NaN。如果设备无法提供航向信息,则该值为 null

7坐标.speed

返回设备的速度(以米每秒为单位)。该值可以为 null。

语法

以下是 GeoLocation 坐标属性的语法 –

coordinates.property

“属性”可以是表中提到的上述属性之一。

示例

让我们看一下 GeoLocation 坐标属性的示例 –

Geolocation coordinates property

Get you coordinates by clicking the below button

Your coordinates are:

var p = document.getElementById("Sample"); function getCoords() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showCoords); } else { p.innerHTML ="This browser doesn't support geolocation."; } } function showCoords(position) { p.innerHTML = "Longitude:" + position.coords.longitude + "
Latitude: " + position.coords.latitude+"
Accuracy: "+ position.coords.accuracy; }

输出

这将产生以下输出 –

HTML DOM Geolocation coordinates属性

单击“坐标”按钮并在“了解您的位置”弹出窗口中单击“允许”时 –

HTML DOM Geolocation coordinates属性

在上面的示例中 –

我们首先创建了一个按钮 COORDINATES 将在用户单击时执行 getCoords() 方法 –

getCoords() 函数获取导航器对象的地理定位属性,以检查浏览器是否支持地理定位。如果浏览器支持地理定位,它将返回一个 Geolocation 对象。使用导航器地理定位属性的 getCurrentPosition() 方法,我们可以获得设备的当前位置。 getCurrentPosition() 方法是一个回调函数,它接受一个函数作为其参数的对象,因为每个函数都是 JavaScript 中的一个对象。

这里,我们将 showCoords() 方法传递给它。 showCoords() 方法以位置接口作为参数,并使用它来显示 id 为“Sample”的段落内的经度、纬度和精度。它使用段落innerHTML属性向其附加文本 –

function getCoords() {   if (navigator.geolocation) {      navigator.geolocation.getCurrentPosition(showCoords);   } else {      p.innerHTML ="This browser doesn't support geolocation.";   }}function showCoords(position) {   p.innerHTML = "Longitude:" + position.coords.longitude + "
Latitude: " + position.coords.latitude+"
Accuracy: "+ position.coords.accuracy;}

以上就是HTML DOM Geolocation coordinates属性的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1551673.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 21:58:40
下一篇 2025年12月21日 21:58:50

相关推荐

  • 如何在HTML中创建一个没有项目符号的无序列表?

    无序列表是一组用圆点、圆圈、实心圆和方块标记的项目的无序列表。它使您能够在上下文中控制列表。允许我们将一组相关的项目分组在列表中。 HTML支持有序列表、无序列表,我们必须使用标签来创建无序列表。 标签定义了无序列表。我们使用标签来开始项目列表。项目列表可以标记为圆点、方块、实心圆和空心圆。 默认情…

    好文分享 2025年12月21日
    000
  • 如何使用Tailwind CSS添加全屏背景视频?

    简介 在本文中,我们将向您展示如何使用 Tailwind CSS 将全屏背景视频添加到您的网页。 Tailwind CSS 是一个实用程序优先的 CSS 框架,可以轻松创建响应式且一致的设计。它提供了一组 CSS 类,您可以使用它们快速向 HTML 元素添加样式。 将全屏背景视频添加到您的网页中可以…

    2025年12月21日
    000
  • 如何在HTML中添加拼写检查器?

    要添加拼写检查器,请使用 HTML 中的 spellcheck 属性。该属性检查输入元素、 元素和可编辑元素中文本的拼写和语法。 注意 – 它适用于输入元素,但不适用于密码。 示例 您可以尝试运行以下代码在 HTML 中添加拼写检查器 – Subject: Add an in…

    2025年12月21日
    000
  • 在HTML中,如何设置拖放数据时是复制、移动还是链接?

    使用 dropzone 属性设置是否复制、移动或链接拖动的数据。 复制 – 拖放将创建拖动元素的副本。移动 – 拖动元素将移动到新位置。 链接 – 它创建指向拖动数据的链接        尝试以下操作以在 JavaScript 中使用 dropzone 属性 &#…

    2025年12月21日
    000
  • 如何在HTML中设置表格宽度?

    我们使用内联样式属性,在HTML中设置表格的宽度。该属性在HTML的 标签内使用,使用CSS属性width来设置表格的宽度。 语法 以下是在HTML中设置表格宽度的语法。 … Example 的中文翻译为: 示例 以下是在 HTML 中设置表格宽度的示例程序。 table { border:1px …

    2025年12月21日
    000
  • 你能使用HTML5 Canvas在页面上截取一张屏幕截图吗?

    Html2Canvas是一个JavaScript库,可以截取整个网页或特定部分的屏幕截图。它不会截图,而是根据页面信息创建视图。 示例 下面给出的是示例代码。这里,html2canvas.js 脚本包含在 中。调用 html2canvas() 方法。返回base64值,最终创建图像源或图像文件。 T…

    2025年12月21日
    000
  • 如何在HTML中的下拉列表中包含一个选项?

    要在下拉列表中包含选项,请使用 HTML 中的 标记。 HTML 标签在表单中用于定义下拉列表中的选项。 HTML 标签还支持以下附加属性 – 属性 值 描述 立即学习“前端免费学习笔记(深入)”; th> 禁用 禁用 禁用输入控件。该按钮不会接受用户的更改。它也无法接收焦点,并且…

    2025年12月21日
    000
  • 如何将一个iframe中的超链接加载到另一个iframe中?

    有时候,任务是在一个容器中点击一个链接,然后在另一个容器中显示内容。在HTML中,使用iframes可以轻松地在页面上指定的区域显示内容。在本文中,使用两个不同的示例,链接被用来通过另一个iframe链接加载一个iframe。在示例1中,上方iframe中的链接用于在下方iframe中显示两张不同的…

    2025年12月21日
    000
  • a标签的意思是什么

    a标签是超链接的意思,通过该标签可以实现从一个页面跳转到另一个页面,或者在当前页面内部进行跳转。a标签是一种块级元素,由一对尖括号包围,语法形式为,其中URL为链接的目标地址。需要注意的是,a标签的href属性是必须的,指定了链接的目标地址。同时,a标签还可以包含一些其他的属性,例如id、class…

    2025年12月21日
    000
  • MQTT和HTTP协议之间有什么区别?

    让我们了解超文本传输​​协议 (HTTP) 和 MQ 遥测的概念传输 (MQTT) 协议,然后再了解它们之间的差异。 超文本传输​​协议 (HTTP) 超文本传输​​协议 (HTTP) 必须是最常用的应用程序层约定今天的地球。它构建了大多数人理解互联网的前提——万维网。 它的动机是为超文本标记语言(…

    2025年12月21日
    000
  • 如何在HTML中显示一个简短的提示,描述元素的预期值?

    在 HTML 中使用 placeholder 属性来显示描述元素预期值的提示。 示例 您可以尝试运行以下代码来实现 placeholder 属性 – Login 以上就是如何在HTML中显示一个简短的提示,描述元素的预期值?的详细内容,更多请关注创想鸟其它相关文章!

    2025年12月21日
    000
  • Phonegap + Windows Phone 8:HTML5视口元数据和缩放问题

    每当你遇到这样的问题时,就意味着你没有正确编写 CSS。 只需在 CSS 中添加以下内容 – * { zoom:1; -ms-content-zooming:none;} 对于某些代码,甚至以下代码也可以工作 – @viewport{ width:320px;}@-ms-vi…

    2025年12月21日
    000
  • 在HTML中的移动网页浏览器上下拉刷新

    当需要下拉屏幕以刷新页面以获取最新更新时,可以借助JavaScript、xhttprequests和触摸事件来实现。 下拉刷新是AJAX中XHR的触发器。它向我们想要的元素添加新数据。 可以通过劫持JavaScript滚动机制(如iscroll)来实现下拉刷新。Twitter正在使用iscroll来…

    2025年12月21日
    000
  • 使用传统DOM可以访问哪些文档属性?

    以下是可以使用旧版 DOM 访问的文档属性 – Sr.No 属性与说明 1alinkColor 已弃用 – 指定激活链接颜色的字符串。 Ex – document.alinkColor 2anchors[ ] Anchor数组对象,文档中出现的每个锚点都有一个 E…

    2025年12月21日
    000
  • HTML5的Canvas元素可以通过Canvas构造函数创建吗?

    在本文中,我们将执行如何从 canvas 构造函数创建 HTML5 canvas 元素。我们可以通过使用 HTML 中的 元素来实现该任务。 在深入示例之前,让我们先了解一下 HTML 中 元素的定义和用法。 Canvas Api 可用于通过 javascript 和 html 元素绘制图形。它可应…

    2025年12月21日 好文分享
    000
  • 从HTML画布中获取像素颜色

    要从画布获取像素颜色,请使用以下代码。这将返回 rgba 中的颜色 – var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4// color in rgbavar r = data[index]var g = data…

    2025年12月21日
    000
  • 如何在HTML中使用搜索输入类型?

    Internet provides us a lot of services which we can access through the respective websites. Many of times, we are need to search information on a part…

    2025年12月21日
    000
  • 如何将HTML表单数据作为文本并发送到html2pdf?

    html2pdf 是一个 JavaScript 包,允许开发人员将 html 转换为 canvas、pdf、图像等。它将 html 作为参数并将其添加到 pdf 或所需文档中。此外,它还允许用户在添加 html 内容后下载该文档。 在这里,我们将访问表单并使用html2pdf npm包将其添加到pd…

    2025年12月21日
    000
  • 我们如何使用分割标签来为HTML元素设置样式?

    标记用作 html 元素的容器。借助此标签,我们可以轻松定义 html 文档的一部分。它还用于将大部分 html 元素分组在一起并轻松格式化它们。 标签与块级元素一起使用。 标记接受所有 CSS 属性,并使用 class 和 id 等属性设置其中元素的样式。 语法 以下是 标记的语法。 Conten…

    2025年12月21日
    000
  • HTML文件输入控件的capture和accept属性无法正常工作

    使用accept属性在HTML中设置服务器接受的文件类型。只能在标签中使用该属性。 示例 您可以尝试运行以下代码来使用accept属性: File Upload Box capture 属性是一个布尔属性,如果指定,则表示首选直接从设备捕获媒体…。 capture 属性不用于将相机选项包…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信