夜猫子的知识栈 夜猫子的知识栈
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夜猫子

前端练习生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • canvas
  • clipboard
  • fetch
  • fontface
  • formdata
  • geolocation
    • Geolocation 对象
      • Geolocation.getCurrentPosition()
      • Geolocation.watchPosition()
      • Geolocation.clearWatch()
    • Coordinates 对象
    • 参考链接
  • headers
  • intersectionObserver
  • intl-relativetimeformat
  • intl-segmenter
  • offline
  • page-lifecycle
  • page-visibility
  • pointer-lock
  • postmessage
  • request
  • response
  • server-sent-events
  • service-worker
  • svg
  • url
  • urlpattern
  • urlsearchparams
  • web-share-api
  • webaudio
  • webcomponents
  • websocket
  • 《Web Api》笔记
夜猫子
2024-09-06
目录

geolocation

# Geolocation API

Geolocation API 用于获取用户的地理位置。

由于该功能涉及用户隐私,所以浏览器会提示用户,是否同意给出地理位置,用户可能会拒绝。另外,这个 API 只能在 HTTPS 环境使用。

浏览器通过navigator.geolocation属性提供该 API。

# Geolocation 对象

navigator.geolocation属性返回一个 Geolocation 对象。该对象具有以下三个方法。

  • Geolocation.getCurrentPosition():返回一个 Position 对象,表示用户的当前位置。
  • Geolocation.watchPosition():指定一个监听函数,每当用户的位置发生变化,就执行该监听函数。
  • Geolocation.clearWatch():取消watchPosition()方法指定的监听函数。

# Geolocation.getCurrentPosition()

Geolocation.getCurrentPosition()方法用于获取用户的位置。

navigator.geolocation.getCurrentPosition(success, error, options)
1

该方法接受三个参数。

  • success:用户同意给出位置时的回调函数,它的参数是一个 Position 对象。
  • error:用户拒绝给出位置时的回调函数,它的参数是一个 PositionError 对象。该参数可选。
  • options:参数对象,该参数可选。

Position 对象有两个属性。

  • Position.coords:返回一个 Coordinates 对象,表示当前位置的坐标。
  • Position.timestamp:返回一个对象,代表当前时间戳。

PositionError 对象主要有两个属性。

  • PositionError.code:整数,表示发生错误的原因。1表示无权限,有可能是用户拒绝授权;2表示无法获得位置,可能设备有故障;3表示超时。
  • PositionError.message:字符串,表示错误的描述。

参数对象option可以指定三个属性。

  • enableHighAccuracy:布尔值,是否返回高精度结果。如果设为true,可能导致响应时间变慢或(移动设备的)功耗增加;反之,如果设为false,设备可以更快速地响应。默认值为false。
  • timeout:正整数,表示等待查询的最长时间,单位为毫秒。默认值为Infinity。
  • maximumAge:正整数,表示可接受的缓存最长时间,单位为毫秒。如果设为0,表示不返回缓存值,必须查询当前的实际位置;如果设为Infinity,必须返回缓存值,不管缓存了多少时间。默认值为0。

下面是一个例子。

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

function success(pos) {
  var crd = pos.coords;

  console.log(`经度:${crd.latitude}`);
  console.log(`纬度:${crd.longitude}`);
  console.log(`误差:${crd.accuracy} 米`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Geolocation.watchPosition()

Geolocation.watchPosition()对象指定一个监听函数,每当用户的位置发生变化,就是自动执行这个函数。

navigator.geolocation.watchPosition(success[, error[, options]])
1

该方法接受三个参数。

  • success:监听成功的回调函数,该函数的参数为一个 Position 对象。
  • error:该参数可选,表示监听失败的回调函数,该函数的参数是一个 PositionError 对象。
  • options:该参数可选,表示监听的参数配置对象。

该方法返回一个整数值,表示监听函数的编号。该整数用来供Geolocation.clearWatch()方法取消监听。

下面是一个例子。

var id;

var target = {
  latitude : 0,
  longitude: 0
};

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

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log('恭喜,你已经到达了指定位置。');
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
}

id = navigator.geolocation.watchPosition(success, error, options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Geolocation.clearWatch()

Geolocation.clearWatch()方法用来取消watchPosition()方法指定的监听函数。它的参数是watchPosition()返回的监听函数的编号。

navigator.geolocation.clearWatch(id);
1

使用方法的例子见上一节。

# Coordinates 对象

Coordinates 对象是地理位置的坐标接口,Position.coords属性返回的就是这个对象。

它有以下属性,全部为只读属性。

  • Coordinates.latitude:浮点数,表示纬度。
  • Coordinates.longitude:浮点数,表示经度。
  • Coordinates.altitude:浮点数,表示海拔(单位:米)。如果不可得,返回null。
  • Coordinates.accuracy:浮点数,表示经度和纬度的精度(单位:米)。
  • Coordinates.altitudeAccuracy:浮点数,表示海拔的精度(单位:米)。返回null。
  • Coordinates.speed:浮点数,表示设备的速度(单位:米/秒)。如果不可得,返回null。
  • Coordinates.heading:浮点数,表示设备前进的方向(单位:度)。方向按照顺时针,北方是0度,东方是90度,西方是270度。如果Coordinates.speed为0,heading属性返回NaN。如果设备无法提供方向信息,该属性返回null。

下面是一个例子。

navigator.geolocation.getCurrentPosition( function (position) {
  let lat = position.coords.latitude;
  let long = position.coords.longitude;
  console.log(`纬度:${lat.toFixed(2)}`);
  console.log(`经度:${long.toFixed(2)}`);
});
1
2
3
4
5
6

# 参考链接

  • Geolocation API (opens new window), by MDN
编辑 (opens new window)
上次更新: 2024/9/6 12:14:45
formdata
headers

← formdata headers→

最近更新
01
IoC 解决了什么痛点问题?
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式