使用 HTML5 Geolocation 构建基于地理位置的 Web 应用（3）构建实用应用

look_w

构建实用应用本节将介绍如何用刚刚介绍的“重复性位置更新请求”构建一个简单有用的 Web 应用程序：距离跟踪器。通过此应用程序可以了解到 HTML5 Geolocation API 的强大之处。
想要快速确定在一定时间内的行走距离，通常可是使用 GPS 导航系统或计步器这样的专业设备。基于 HTML5 Geolocation 提供的强大服务，我们可以自己创建一个网页来跟踪从网页被加载的地方到目前所在位置所经过的距离。虽然它在台式机上不大实用，可在手机上运行时非常理想的。只要在手机浏览器中打开这个示例页面并授予其位置访问的权限，每隔几秒钟，应用程序就会更新计算走过的距离。如图 2 所示。
图 2. HTML5 Geolocation 示例应用程序在 Moto ME525 上的运行界面在此实例中使用的 watchPosition() 函数刚刚在上一节中介绍过。每当有新的位置返回，就将其与上次保存的位置进行比较以计算距离。距离计算使用著名的 Haversine 公式来实现，这个公式能够根据经纬度计算地球上两点间的距离。它的 JavaScript 实现如清单 8 所示：
清单 8. Haversine 公式的 JavaScript 实现

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

function toRadians(degree) {    return this * Math.PI / 180; } function distance(latitude1, longitude1, latitude2, longitude2) {    // R 是地球半径（KM）    var R = 6371;    var deltaLatitude = toRadians(latitude2-latitude1);    var deltaLongitude = toRadians(longitude2-longitude1);    latitude1 = toRadians(latitude1);    latitude2 = toRadians(latitude2);    var a = Math.sin(deltaLatitude/2) *            Math.sin(deltaLatitude/2) +            Math.cos(latitude1) *            Math.cos(latitude2) *            Math.sin(deltaLongitude/2) *            Math.sin(deltaLongitude/2);    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));    var d = R * c;    return d; }

其中 distance() 函数用来计算两个经纬度表示的位置间的距离，我们可以定期检查用户的位置，并调用这个函数来得到用户的近似移动距离。这里有一个假设，即用户在每个区间上都是直线移动的。
显示不准确的位置信息会给用户提供误导，给用户以极其坏的印象，认为我们的应用程序不可靠，我们应该尽量避免。因此，我们将通过 position.coords.accuracy 过滤掉所有低精度的位置更新数据。如清单 9 所示：
清单 9. 过滤不准确的位置更新数据

1 2 3 4 5

// 如果 accuracy 的值太大，我们认为它不准确，不用它计算距离 if (accuracy >= 500) {    updateStatus("这个数据太不靠谱，需要更准确的数据来计算本次移动距离。");    return; }

最后，我们来计算移动距离。假设前面已经至少收到了一个准确的位置，我们将更新移动的总距离并显示给用户，同时还存储当前数据以备后面的比较。代码如清单 10 所示：
清单 10. 计算移动距离

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 计算移动距离 if ((lastLat != null) && (lastLong != null)) {    var currentDistance = distance(latitude, longitude, lastLat, lastLong);    document.getElementById("本次移动距离").innerHTML =        "本次移动距离：" + currentDistance.toFixed(4) + " 千米";    totalDistance += currentDistance;    document.getElementById("总计移动距离").innerHTML =        "总计移动距离：" + currentDistance.toFixed(4) + " 千米";    }    lastLat = latitude;    lastLong = longitude;    updateStatus("计算移动距离成功。"); }

至此，本文已经给出了该示例的所有核心代码（完整代码请从附件中下载）。用这么简短的不到 150 行的 HTML 和脚本代码，我们就构建了一个能够持续监控用户位置变化的示例应用程序，几乎完整地演示了 Geolocation API 的使用。不妨把它放到您支持地理位置定位的手机或移动设备上，看看您一天大概能走多少路吧，这是不是很有趣呢？
结束语本文介绍了 HTML5 提供的新功能 Geolocation，讲述了位置信息的构成：纬度、经度和准确度等，以及它们的获取途径。本文还介绍了 HTML5 Geolocation 引发的隐私问题，最后演示如何把这个新功能添加到您的应用程序中，它特别适合在移动设备如手机上运行。