使用地理位置 API

发表 admin at 2024年8月26日

类别

未分类

标签

Geolocation API 是一个非常简单的 API，可用于获取设备当前的位置坐标。它只有两种方法：获取当前位置和观察位置返回的数据非常简单，但与地图 API 结合时，可以创建复杂的位置感知 Web 应用程序。

设置

在执行任何操作之前，您需要检查该 API 是否在用户的浏览器中可用：

if (navigator.geolocation) {
  // ????️ yep, we can proceed!
} else {
  // no can do
}

请注意，您的网站或应用必须通过https提供服务，API 才能正常工作。对于本地开发，您需要运行本地服务器，而不是直接打开 html 文件。如果您的计算机上有npm 5.2或更高版本，则可以使用npx快速运行 http 服务器：

$ npx http-server

获取当前位置

使用获取当前位置方法获取用户的坐标一次。第一个且唯一必需的参数应为成功回调函数，如果位置请求成功，该函数将使用位置对象调用。

这是一个将设备的经度和纬度打印到控制台的简单示例：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(displayLocationInfo);
}

function displayLocationInfo(position) {
  const lng = position.coords.longitude;
  const lat = position.coords.latitude;

  console.log(`longitude: ${ lng } | latitude: ${ lat }`);
}

以下是传递给成功回调的位置对象的形状和示例数据：

coords:
  accuracy: 52
  altitude: null
  altitudeAccuracy: null
  heading: null
  latitude: 27.380583
  longitude: 33.631839
  speed: null
timestamp: 1509152059444

从上面的例子可以看出，坐标可能具有null值。数据的可用性将取决于所用设备的功能。航向值（如果有）将以相对于真北的度数表示，并顺时针旋转，速度值（如果有）将以米/秒为单位。

允许

由于位置信息可能很敏感，因此域第一次调用以获取用户的位置时，浏览器将通过显示类似这样的小部件来请求用户的许可：

地理位置权限小部件

如果用户拒绝访问，则将调用错误回调（如果有），错误代码为 1（没有权限）。

观察位置

还有一个观察位置每次设备发生显著位置变化时，该方法都会返回新的位置数据。

在以下示例中，我们启动一个位置观察器，然后在 15 秒后停止它：

const watcher = navigator.geolocation.watchPosition(displayLocationInfo);

setTimeout(() => {
  navigator.geolocation.clearWatch(watcher);
}, 15000);

function displayLocationInfo(position) {
  // ...do something with the data each time
}

我们使用清除使用观察者id来停止观察位置数据。

错误处理

你可以将错误处理程序回调作为第二个参数提供给获取当前位置或者观察位置。如果调用错误回调，则会传入一个错误对象，该对象将包含一个code属性，其值为 3 (暂停), 2 (位置不可用) 或 1 (没有权限)，具体取决于错误的性质。

这是一个简单的例子，我们通过设置 0ms 的超时值来触发自动错误：

navigator.geolocation.getCurrentPosition(displayLocationInfo, handleLocationError, { timeout: 0 });

function displayLocationInfo(position) {
  // ...do stuff
}

function handleLocationError(error) {
  switch (error.code) {
    case 3:
      // ...deal with timeout
      break;
    case 2:
      // ...device can't get data
      break;
    case 1:
      // ...user said no 
  }
}

选项

最后，您可以传入第三个参数，其中包含以下选项：

启用高精度：采用布尔值，默认为 false。指示位置信息是否应尽可能准确（更准确可能会在 CPU 和电池使用方面花费更多）。
最大年龄：位置数据缓存保留的毫秒数。默认值为 0。
暂停：如果没有获取任何数据，则在经过多少毫秒后会调用错误回调。

以下是传入maximumAge和timeout选项的示例：

navigator.geolocation.getCurrentPosition(
  displayLocationInfo,
  handleLocationError,
  { maximumAge: 1500000, timeout: 0 }
);

function displayLocationInfo(position) {
  const lng = position.coords.longitude;
  const lat = position.coords.latitude;

  console.log(`longitude: ${lng} | latitude: ${lat}`);
}

function handleLocationError(error) {
  switch (error.code) {
    case 3:
      // timeout was hit, meaning nothing's in the cache
      // let's provide a default location:
      displayLocationInfo({ coords: { longitude: 33.631839, latitude: 27.380583 } });

      // now let's make a non-cached request to get the actual position
      navigator.geolocation.getCurrentPosition(displayLocationInfo, handleLocationError);
      break;
    case 2:
      // ...
      break;
    case 1:
    // ...
  }
}

如果有可用的缓存位置数据，并且该数据最多为 25 分钟（1500000 毫秒），我们将返回该数据。如果没有，我们将立即出错（使用暂停0ms ）。在超时的错误处理程序情况下，我们提供默认位置值，然后进行另一次调用以获取新的位置数据。这样，应用程序可以避免在收集新的位置数据时显示空白状态。

浏览器支持

我可以使用地理定位吗？有关各大浏览器对地理定位功能的支持数据来自caniuse.com。