使用 Geolocation API 的简单行程表

发布于 2023-04-27 13:06:30 字数 4087 浏览 70 评论 0

Geolocation API 让您可以找出用户的位置，并在他们四处走动时密切关注他们，始终征得用户的同意。此功能可用作用户查询的一部分，例如，将某人引导至目的地。它还可以用于对用户创建的某些内容进行“地理标记”，例如标记照片的拍摄地点。 API 与设备无关；它不关心浏览器如何确定位置，只要客户端可以以标准方式请求和接收位置数据即可。

底层机制可能是通过 GPS、wifi，或者只是要求用户手动输入他们的位置。由于这些查找中的任何一个都需要一些时间，因此 API 是异步的；每当您请求位置时，您都会向它传递一个回调方法。

这里的示例是一个行程表，显示初始位置并维护自页面加载以来他们已经走过的距离的显示。

步骤 1. 检查兼容性

您可以通过测试地理位置对象的存在来轻松检查兼容性：

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

步骤 2. 声明 Trip Meter HTML

在此示例中，您要构建一个行程表，因此声明以下 HTML：

<div>
  <p>
    Starting Location (lat, lon):<br/>
    <span>???</span>°, <span>???</span>°
  </p>
  <p>
    Current Location (lat, lon):<br/>
    <span>???</span>°, <span>???</span>°
  </p>
  <p>
    Distance from starting location:<br/>
    <span>0</span> km
  </p>
</div>

接下来的几个步骤将使用 Geolocation API 来填充所有这些空跨度。

步骤 3. 确定用户的当前位置

getCurrentPosition()将异步报告用户的当前位置。页面加载后立即调用它，以便它正确填充 - 并保存以备后用 - 起始位置：

window.onload = function() {
  var startPos;
  navigator.geolocation.getCurrentPosition(function(position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  });
};

如果这是该域上的应用程序第一次请求权限，浏览器通常会检查用户是否同意。根据浏览器的不同，可能还存在始终允许（或禁止）权限查找的首选项，在这种情况下，确认过程将被绕过。

运行此代码后，您现在应该能够看到起始位置。根据您的浏览器使用的定位设备，位置对象实际上可能包含的不仅仅是纬度和经度，例如它可能包含高度或方向。您可以通过将位置变量记录到控制台来进一步探索。

步骤 4. 处理错误

不幸的是，并非所有的位置查找都是成功的。可能无法定位 GPS，或者用户突然禁用了位置查找。第二个可选参数 getCurrentPosition()将在发生错误时调用，因此您可以在回调中通知用户：

window.onload = function() {
  var startPos;
  navigator.geolocation.getCurrentPosition(function(position) {
    // same as above
  }, function(error) {
    alert('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from locaton provider)
    //   3: timed out
  });
};

步骤 5. 监控用户位置

上次调用 getCurrentPosition()仅在页面加载时执行一次。要跟踪更改，请使用 watchPosition(). 每当用户移动时，它都会自动通知回调函数：

navigator.geolocation.watchPosition(function(position) {
  document.getElementById('currentLat').innerHTML = position.coords.latitude;
  document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

步骤 6. 显示行驶距离

此步骤与 Geolocation API 没有直接关系，但完善了演示并提供了一个示例，说明您可以如何使用位置数据。添加一个额外的行 watchPosition()填充行进距离的处理程序：

navigator.geolocation.watchPosition(function(position) {
  // same as above
  document.getElementById('distance').innerHTML =
      calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                        position.coords.latitude, position.coords.longitude);
});

calculateDistance() 函数执行几何算法以确定两个坐标之间的距离。 Javascript 实现改编自下提供的脚本 Moveable Type在 Creative Commons 许可：

function calculateDistance(lat1, lon1, lat2, lon2) {
  var R = 6371; // km
  var dLat = (lat2 - lat1).toRad();
  var dLon = (lon2 - lon1).toRad(); 
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
          Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
          Math.sin(dLon / 2) * Math.sin(dLon / 2); 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); 
  var d = R * c;
  return d;
}
Number.prototype.toRad = function() {
  return this * Math.PI / 180;
}