如何使用地理位置API

使用Geolocation API,我们可以向浏览器询问用户的位置坐标

浏览器显示一个navigator.geolocation对象,通过它我们将执行所有地理位置操作。

出于安全性考虑,它仅在使用HTTPS服务的页面上可用,并且在所有现代浏览器中都可用。

navigator.geolocation

The geolocation object

自从window是全局对象,我们可以访问navigator没有指定window.navigator

window.navigator浏览器公开的属性指向导航器对象这是一个容器对象这使我们可以使用许多Web平台API。

geolocation对象提供以下方法:

  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

第一个用于获取当前位置坐标。当我们第一次调用此方法时,浏览器会自动询问用户是否允许与我们共享此信息。

这是Chrome中该界面的外观:

The permission screen in Chrome

在Firefox上:

The permission screen in Firefox

在Safari上:

The permission screen in Safari

每个起点只需执行一次。您可以更改自己做出的决定,并还原权限决定。在Chrome中,您可以通过以下方法来执行此操作:单击域附近的锁定图标:

Permission details

授予此权限后,我们便可以继续。

获取用户的位置

让我们从以下示例代码开始:

navigator.geolocation.getCurrentPosition(() => {})

权限面板应出现。允许权限。

注意我是如何传递一个空的箭头功能,因为该函数需要回调函数。

这个函数是通过一个Position对象,其中包含实际位置:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
})

该对象具有2个属性:

  • coords, 一种Coordinates目的
  • timestamp, 这UNIX时间戳检索职位时

Coordinates对象带有几个定义位置的属性:

  • accuracy所测量位置的精度,以米为单位
  • altitude测得的高度值
  • altitudeAccuracy测得的高度精度,以米为单位
  • heading设备运行的方向。以度数表示(0 =北,东= 90,南= 180,西= 270)
  • latitude测得的纬度值
  • longitude经度测量值
  • speed设备运行的速度,以米/秒为单位

根据实现方式和设备的不同,其中一些null。例如,在我的MacBook Air上运行的Chrome上,我仅获得了accuracylatitudelongitude

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude)
  console.log(position.coords.longitude)
})

观察职位变化

除了获得用户位置一次,您还可以使用getCurrentPosition(),您可以使用watchPosition()的方法navigator.geolocation注册一个回调函数,该函数将在设备将与我们进行通信的每次更改时调用。

用法:

navigator.geolocation.watchPosition(position => {
	console.log(position)
})

当然,如果尚未授予该权限,浏览器也会使用此方法来请求该权限。

我们可以通过致电navigator.geolocation.clearWatch()方法,将其传递给id由...返回watchPosition()

const id = navigator.geolocation.watchPosition(position => {
	console.log(position)
})

//stop watching after 10 seconds setTimeout(() => { navigator.geolocation.clearWatch(id) }, 10 * 1000)

如果用户拒绝许可

还记得我们调用其中一种方法获取位置时浏览器显示的权限弹出窗口吗?

如果用户拒绝,我们可以通过添加错误处理功能作为方法的第二个参数来拦截这种情况。getCurrentPosition()watchPosition()

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
})

传递给第二个参数的对象包含一个code属性以区分错误类型:

  • 1表示拒绝权限
  • 2表示位置不可用
  • 3表示超时

添加更多选项

当我以前谈论错误时,我提到了超时错误。查找位置可能需要一些时间,并且我们可以选择设置允许执行操作的最长时间。

您可以通过在方法中添加第三个参数来添加超时getCurrentPosition()watchPosition(), 一个东西。

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {

})

在此对象内,我们可以传递属性

  • timeout设置请求错误之前的毫秒数
  • maximumAge设置浏览器缓存位置的最大“年龄”。我们不接受比设定的毫秒数还早的时间
  • enableHighAccuracy默认为布尔false,则需要一个可能具有最高精确度的位置(这可能需要更多时间和更多能量)

用法示例:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {
  timeout: 1000,
  maximumAge: 10000,
  enableHighAccuracy: true
})

免费下载我的JavaScript初学者手册


更多浏览器教程: