使用 Geolocation API 的简单行程表

Michael Mahemoff

简介

借助 Geolocation API，您可以在征得用户同意的情况下，了解用户所在的位置并跟踪其移动。此功能可用于用户查询，例如引导用户前往目的地。它还可用于为用户创建的某些内容添加“地理标签”，例如标记照片的拍摄地点。该 API 与设备无关，它不关心浏览器如何确定位置，只要客户端能够以标准方式请求和接收位置数据即可。底层机制可能是通过 GPS、Wi-Fi，或只是要求用户手动输入其位置。由于这些查找操作都需要一些时间，因此该 API 是异步的；每当您请求位置信息时，都需要向其传递一个回调方法。

此处的示例是一个行程表，它会显示初始位置，并持续显示自页面加载以来用户已行驶的距离。

第 1 步：检查兼容性

Browser Support

• 5
• 12
• 3.5
• 5

Source

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

// 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 步：声明行程表 HTML

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

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

在接下来的几个步骤中，我们将使用 Geolocation API 填充所有这些空 span。

第 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 提供的脚本在知识共享许可下改编的：

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;
}