使用 Geolocation API 的简单行程表

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

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

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

步骤 1. 检查兼容性

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

// check for Geolocation supportif (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;}

最终产品

当然，你需要走一段距离才能让距离数字继续下去，所以在你移动的时候试试这个。 建议您在配备 GPS 的设备（例如大多数现代智能手机）上尝试此测试以确保准确性。