如何使用 JavaScript 获取用户位置

本文最初是我YouTube频道上的一个视频教程，您可以在这里观看：https://youtu.be/Xd43hZKaUS0

假设您需要获取当前网页或应用程序用户的位置。

或许你需要向他们显示他们的位置（就像谷歌在搜索页面底部所做的那样），或者根据他们的位置调整内容。

您可以使用地理位置 Web API 获取用户的当前位置。

地理位置 API

浏览器内部的对象window有一个名为navigator`which` 的属性，它本身也是一个对象，该对象包含一个名为 `which` 的属性，而geolocation`which` 又是另一个对象。

if (window.navigator.geolocation) {
 // Geolocation available
} 

建议您将代码放在 if 语句中，因为并非所有浏览器都支持地理位置 Web API。

如果浏览器支持，您可以使用该函数从地理位置 API 请求用户的位置getCurrentPosition。

window.navigator.geolocation
  .getCurrentPosition(console.log, console.log);

我说“请求”，是因为用户必须确认他们是否愿意授予您的网站/应用程序查找其位置的权限。

获取当前位置

getCurrentPosition 函数接受两个参数。

这些是地理位置查找成功或失败时要执行的回调函数。

getCurrentPosition(successCallback, failureCallback);

如果用户同意（通过点击弹出窗口中的接受按钮），您将在成功回调中收到一个对象，其中包含用户的经度和纬度值。

结果大致如下：

{
  coords = { 
    latitude: 51.4554803,
    longitude: -2.0843058,
    altitude: null,
    accuracy: 49,
    altitudeAccuracy: null,
    heading: null,
    speed: null,
  },
  timestamp: 1583860898576
}

如果您希望以人类可读的格式识别用户的位置，这些信息本身用处不大，因此您需要使用地理编码服务将这些位置转换为实际位置。

地理编码

有好几种地理编码服务提供商。在本教程中，我使用了 opencagedata.com（免费，但请求数据需要账户和 API 密钥）来转换经纬度值。

如果您使用的是 Opencagedata，一旦您拥有了 API 和帐户密钥，您就可以创建一个类似这样的函数，用于成功回调。

const successfulLookup = position => {
  const { latitude, longitude } = position.coords;
  fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=1234`)
    .then(response => response.json();
    .then(console.log); // Or do whatever you want with the result

然后你就可以简单地将它插入到getCurrentPosition函数中了。

window.navigator.geolocation
  .getCurrentPosition(successfulLookup, console.log);

你收到的响应会附带很多元数据，但其中有一个results数组，应该只会返回一个包含位置详细信息的项目。

您可以从以下位置访问“格式化”后的用户位置信息：

results[0].formatted; // Gives something like '54, My street, My Town, My Post Code, My Country

此外，components结果数组中的每个项目都有一个属性，可以直接访问位置的每个部分。

享受！

如果您想查看示例，请观看教程了解更多详情。