Geolocation API - 允许用户根据需要向 Web 应用程序提供他们的位置

Geolocation API 允许用户根据需要向 Web 应用程序提供他们的位置。出于隐私原因，用户需要获得报告位置信息的许可。

希望使用 Geolocation 对象的 WebExtensions 必须在其清单中添加 "geolocation" 权限。用户的操作系统会在第一次请求时提示用户允许位置访问。

概念和用法

您通常希望在您的 Web 应用程序中检索用户的位置信息，例如在地图上绘制他们的位置，或显示与其位置相关的个性化信息。

Geolocation API 通过调用 navigator.geolocation; 调用之后，用户的浏览器要求他们授予访问其位置数据的权限。如果他们接受，则浏览器将使用设备上的最佳可用功能来访问此信息（例如 GPS）。

开发人员现在可以通过几种不同的方式访问此位置信息：

• Geolocation.getCurrentPosition()：检索设备的当前位置。
• Geolocation.watchPosition()：注册一个处理函数，每次设备位置改变时都会自动调用，返回更新的位置。

在这两种情况下，方法调用最多需要三个参数：

• 一个必选的成功回调：如果位置检索成功，则回调以 GeolocationPosition 对象作为其唯一参数执行，用于访问位置数据。
• 一个可选的错误回调：如果位置检索不成功，回调以 GeolocationPositionError 对象作为其唯一参数执行，提供有关出错的访问信息。
• 一个可选的 PositionOptions 对象，它提供了检索位置数据的选项。

有关地理定位使用的更多信息，请阅读使用地理定位 API。

接口

Geolocation

此 API 的主类 — 包含检索用户当前位置、监视其位置变化以及清除先前设置的监视的方法。

GeolocationPosition

表示用户的位置。GeolocationPosition 实例是成功调用 Geolocation 方法的返回值。在成功回调中，并包含时间戳和 GeolocationCoordinates 对象实例。

GeolocationCoordinates

表示用户位置的坐标；GeolocationCoordinates 实例包含纬度、经度和其他重要的相关信息。

GeolocationPositionError

GeolocationPositionError，是调用是 Geolocation 的一个方法不成功而返回的，它包含一个错误代码和信息。

Navigator.geolocation

API 的入口点。返回一个 Geolocation 对象实例，从中可以访问所有其他功能。

字典

PositionOptions

表示一个对象，其中包含作为 Geolocation.getCurrentPosition() 和 Geolocation.watchPosition() 的参数传入的选项。

实例

在以下实例中，Geolocation API 用于检索用户的纬度和经度。如果成功，超链接将填如一个 openstreetmap.org URL，该 URL 将显示当前的的位置。

<style>
body {
  padding: 20px;
  background-color:#ffffc9
}

button {
  margin: .5rem 0;
}
</style>

<button id = "find-me">显示我的位置</button><br/>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>

<script>
function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.href = '';
  mapLink.textContent = '';

  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `纬度：${latitude} °，经度：${longitude} °`;
  }

  function error() {
    status.textContent = '无法检索您的位置';
  }

  if(!navigator.geolocation) {
    status.textContent = '您的浏览器不支持地理定位';
  } else {
    status.textContent = '定位中…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);
</script>

尝试一下 »

规范

规范	状态	备注
Geolocation API	推荐	-

桌面浏览器兼容性

移动浏览器兼容性

1. Firefox 3.6 中添加了 GPSD（GPS 守护进程）支持。基于 WiFi 的位置由 Google（隐私）或自定义提供商（MLS 说明）提供。

2. 只有面向 Android Nougat (7) 及更高版本的应用程序才需要安全上下文。请参阅 bug 603574。

可用性

由于基于 WiFi 的定位通常由 Google 提供，因此普通的 Geolocation API 在中国可能不可用。您可以使用百度、高德、腾讯等本地第三方供应商。这些服务使用用户的 IP 地址和 / 或本地应用程序来提供增强的定位。

相关链接

• 使用地理定位 API
• w3.org 上的地理定位 API
• 谁移动了我的地理位置？ (Hacks blog)