关于在 web-app 中计算步行距离的建议答案

【问题标题】：Advice on computing walked distance in web-app关于在 web-app 中计算步行距离的建议
【发布时间】：2018-08-29 11:49:47
【问题描述】：

我目前正在构建一个网络应用程序（在 Polymer 中使用 Mapbox），用户可以在其中查看地图上的特色路线并步行。他们问我是否可以添加一个按钮（开始/停止）来记录他们的活动并计算步行的公里数。我构建它的方法是将每个新的地理点存储在位置更改事件 (navigator.geolocation.watchPosition) 上，并计算所有点之间的距离并将它们相加。

现在真正的问题

可能会有用户忘记再次单击停止按钮。如果发生这种情况，应用程序将继续向我的服务器发送数据。这将导致不必要的数据被推送到数据库。

现在我试图找到解决方案：

选项#1

我遇到了使用Page Visibility API 在浏览器中检查活动选项卡的选项。通过这种方式，我可以自动停止/开始跟踪。

if (!document.hidden) {
    // resume tracking
} else {
    // stop tracking
}

但是，我的应用程序的用户通常会锁定他们的屏幕，这也会停止跟踪，因为visibilityState 将是hidden。

选项 #2 我的客户提供了在 x 小时后自动停止计时器的解决方案。然而，这听起来并不直观，因为这仍然会导致奇怪的公里数。

选项 #3 如果您距离特色路线超过 x 米，则自动停止跟踪步行距离。然而，这需要相当多的计算。

选项 #4 跟踪所有用户活动。例如。在地图上捏、点击、缩放等，并在 30 分钟无活动后停止跟踪

我应该如何设计这个应用程序以确保跟踪有意义？

【问题讨论】：

使用 ionic 制作原生的 webapp。只有这样的框架才能解决这个问题。

标签： web-applications geolocation polymer mapbox visibility

【解决方案1】：

对于和我遇到同样问题的人来说，这是我想出的解决方法。

我使用NoSleep.js 在后台播放视频，以确保手机不会进入完全睡眠模式。确保仅在用户与您的应用交互时才添加 NoSleep，否则只会消耗电池电量。

var noSleep = new NoSleep();
document.addEventListener('click', enableNoSleep, false);

function enableNoSleep() {
  noSleep.enable();
  document.removeEventListener('click', enableNoSleep, false);
}

并确保使用noSleep.disable();禁用它

每当我的应用程序（Chrome 中使用Page Visibility API 的活动标签页）再次激活时，我都会轮询当前位置。

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") this.getCurrentLocation();
});

getCurrentLocation() 位置会将当前位置推送到名为 locationHistory 的 Array 中。

我正在使用Turf.js 来计算locationHistory 数组中上一个位置与当前位置之间的距离。

let currentLocation = turf.point(lastpoint);
let previousLocation = turf.point(previouspoint);
let distance = turf.distance(previousLocation, currentLocation);

我将获取当前位置和之前位置之间的距离并将其添加到我的totalDistance。

如果用户将应用放在口袋里并“在线”返回（打开应用），它将获取当前位置与先前位置之间的距离。它不是超级准确（因为它只会在两点之间取直线（但我做了一些测试，这是我能为网络应用程序做的最好的事情。如果用户阻止手机进入，结果会更准确锁定模式。

当您点击开始时，我会在服务器上创建一个时间戳 (Firebase Server Timestamp)，以便知道用户何时开始跟踪。我也知道系统中最长的路线大约是 11 公里，这意味着这应该在 3 小时内可以步行。

我正在运行一些 Firebase Cloud Functions 来查看用户在 3 小时后是否仍在跟踪，并将禁用服务器上的跟踪。当用户在几天后打开应用程序时，它会停止跟踪客户端。

如果您找到更好的解决方案，请告诉我！我很好奇;-)

【讨论】：