JavaScript Geolocation API 教程——如何在 JS 中获取用户的位置

有些应用程序需要你知道用户的位置,如食品配送或电子商务应用程序。所以你需要一个有效的方法来获取这些信息。

我们今天要看的 Geolocation API 是一个简单的解决方案。你可以用它来确定你的用户的位置、当地货币、语言和其他有用的信息。然后,你可以利用这一点,根据他们的位置向他们提供最相关的内容。

在这篇文章中,我们将介绍什么是 Geolocation API、为什么它是有用的,以及如何在你的应用程序中使用它。

Geolocation API 是什么

JavaScript Geolocation API 提供了对与用户设备相关的地理位置数据的访问。这可以通过 GPS、WIFI、IP 地理定位等来确定。

为了保护用户的隐私,它要求获得定位设备的许可。如果用户授予许可,你将获取位置数据,如纬度、经度、高度和速度。你还将取得获取位置数据的准确性和获得位置的大致时间。

以下是它的的一些用途:

  • 在地图上显示用户的位置
  • 获得最新的当地信息
  • 显示用户附近的当地兴趣点(POI)
  • 启用转弯导航(GPS)
  • 追踪车队或送货车辆
  • 给照片加上位置标签

如何使用 Geolocation API

你可以通过调用 navigator.geolocation 对象来访问 Geolocation API。它授予应用程序对设备位置的访问权。

这个对象提供了下面列出的方法,用于处理设备的位置:

  1. getCurrentPosition:返回设备的当前位置
  2. watchPosition:当设备的位置改变时自动调用的处理函数

这些方法有三个可能的参数:

  • 一个 success 回调(必需)
  • 一个 error 回调(可选)
  • 一个 options 对象(可选)

如何用 getCurrentPosition() 获取用户位置

你可以使用 getCurrentPosition 方法来获取用户的当前位置。它向浏览器发送一个异步请求,要求同意分享他们的位置。

以下是获取用户位置的语法:

const successCallback = (position) => {
  console.log(position);
};

const errorCallback = (error) => {
  console.log(error);
};

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

当你运行这个时,你会在浏览器中得到一个请求许可的弹出窗口:

popup

点击 Allow,并打开开发者控制台。你会看到,成功的调用会返回两样东西:

  • GeolocationPosition.coords 对象:代表位置、高度和设备计算这些属性的精度
  • timestamp:代表获得位置的时间

你应该在你的控制台看到类似这样的信息:

GeolocationPosition {coords: GeolocationCoordinates, timestamp: 1662499816712}
    coords: GeolocationCoordinates
        accuracy: 7173.528443511279
        altitude: null
        altitudeAccuracy: null
        heading: null
        latitude: 6.5568768
        longitude: 3.3488896
        speed: null
        [[Prototype]]: GeolocationCoordinates
timestamp: 1662499816712

通过这个简单的请求,我们已经成功地得到了位置。但这还不是全部。我们还可以通过观察用户的位置来追踪他们。

如何用 watchPosition() 跟踪用户位置

watchPosition() 方法允许应用程序持续跟踪用户,并在他们的位置变化时得到更新。它是通过安装一个 handler 函数来实现的,只要用户的设备位置发生变化,该函数就会被自动调用。

以下是语法,其中 id 用于管理或引用该方法:

const id = navigator.geolocation.watchPosition(successCallback, errorCallback);

如何用 clearWatch() 停止追踪位置

我们使用 clearWatch() 方法来取消之前使用 watchPosition 安装的 handler 函数。

navigator.geolocation.clearWatch(id);

如何使用 options 对象

虽然 options 对象是可选的,但它提供的参数可以帮助你获得更准确的结果,例如:

const options = {
  enableHighAccuracy: true,
  timeout: 10000,
};

navigator.geolocation.getCurrentPosition(
  successCallback,
  errorCallback,
  options
);

在上面的代码中,我们在 options 对象中指定:

  • 通过将 enableHighAccuracy 设置为 true,响应应提供更准确的位置。
  • 允许设备返回位置的最大时间长度(以毫秒为单位),在这个例子中是 10 秒。

总结

在本文中,我们了解了 JavaScript Geolocation API,如何使用它来获取用户的位置并使用 watchPosition() 方法跟踪用户。

你可以通过构建天气应用程序、搜索应用程序或地图应用程序来进一步探索此 API。谢谢阅读!