如何使用 JavaScript 检查用户位置

基于位置的响应能力

地理位置

警告

这个小系列旨在扩展我们对“响应式设计”的定义，使其不仅仅考虑屏幕尺寸。上次我们讨论了如何使用 CSS 媒体查询自动在亮暗显示模式之间切换。今天，我们来谈谈我们可以响应环境的另一个方面：用户的位置。

基于位置的响应能力

响应式设计的核心在于充分考虑用户及其设备的环境。毫无疑问，响应式设计最迫切的考量是各种设备可能采用的屏幕尺寸，但除了屏幕尺寸之外，设计师还可以考虑更多其他因素。如果我们的响应式设计不仅能响应屏幕尺寸，还能响应用户的位置，那会怎样？

地理位置

为了实现这一点，我们可以使用Geolocation API。在某些支持此 API 的浏览器中，它仅在安全上下文（HTTPS）下可用，但它提供了一种极其简便的读取设备位置的方法。今天我们将介绍两种不同的地理定位方法：一种是单次检查位置，另一种是持续监控位置。

如何获取用户位置

让我们从一个空白的 HTML 页面开始，尝试获取设备位置信息。我们只需添加一个按钮来触发位置检查即可。如下所示：

<button id="get-location">Get Location</button>

我们希望能够点击此按钮并在控制台中获取位置数据。为此，我们将编写三个 JavaScript 函数。第一个函数将通过事件监听器附加到按钮上。我们可以在 访问 Geolocation API navigator.geolocation。在第一个函数中，我们将检查测试是否支持 Geolocation API navigator.geolocation，如果支持，我们可以使用 来获取位置数据navigator.geolocation.getCurrentPosition()。

function getLocation() {
  if (!navigator.geolocation) {
    console.log('Geolocation API not supported by this browser.');
  } else {
    console.log('Checking location...');
    navigator.geolocation.getCurrentPosition(success, error);
  }
}

Geolocation API 帮助getCurrentPosition()我们快速定位用户。这个函数可以很轻松地完成这项任务，但你可能注意到它需要两个参数，在本例中分别称为success和error。这两个函数也是我们需要编写的。

第一个参数应该是一个在地理定位成功时调用的函数。我们也需要在这个函数中定义一个参数；这个参数会被调用position，浏览器会通过它来将地理定位结果传回给我们。

function success(position) {
  console.log(position);
}

该函数仅在地理定位失败error()时才会调用。希望我们不会触发该函数。

function error() {
  console.log('Geolocation error!');
}

不要忘记getLocation()通过添加点击事件监听器来附加到按钮！

document.getElementById('get-location').addEventListener('click', getLocation);

现在我们已经拥有了获取位置数据所需的所有 JavaScript 代码。点击“获取位置”按钮进行尝试，最终会在控制台中打印一个 GeolocationPosition 对象。该对象是我们地理位置检查结果的数据包。它的键包括一个时间戳和一个coords包含纬度、经度等数据的对象。我们可以利用从中找到的数据coords来创建考虑用户位置的响应式设计。

我们可以使用控制台来查看coords对象，也可以直接将值记录coords到控制台中success()。

function success(position) {
  console.log('Latitude:', position.coords.latitude);
  console.log('Longitude:', position.coords.longitude);
}

如何持续监视用户的位置

我们不仅可以一次性获取用户的位置，还可以持续监控他们的位置。使用该watchPosition()函数，我们可以设置一个处理函数，该函数将在每次地理位置更新时调用。我们需要传入一个函数，以便在成功返回新位置时调用，因此让我们重用该success()函数。

这个例子对于我们的目的来说相当容易设置。我们只需添加一行 JavaScript 代码：

navigator.geolocation.watchPosition(success);

现在我们可以持续获取位置数据了！这会带来一些意料之中的处理、数据和能源开销，但或许你会像我一样，为使用 Geolocation API 如此简单而感到高兴。

警告

本系列提供了一些实用示例，阐述了如何添加不同类型的响应式功能，同时也是开启话题的开场白；一个脑筋急转弯。将用户的位置信息视为他们带入我们应用或网站的情境的一部分，这很值得思考，尤其是作为一种脑力锻炼，但设备需要获得权限才能检查位置信息，而这将成为用户体验中的一个难题。

让用户一进入我们的网站就立即在浏览器中看到对话框确实不太好，但是我们上面提到的那种基于位置的响应式设计会触发这些对话框，以获取位置检查的权限。这并非理想状态。将这些功能付诸实践需要更周全的方法，或者至少将位置响应式设计从最初的登陆体验中延后。尽管如此，我认为你会发现，将位置响应式的通用定义扩展到你的网页设计方案中，将会是一个令人兴奋的补充。