Question

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

现在是真正的问题

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

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

选项1

我遇到了使用Page Visibility API检查浏览器中活动标签的选项。这样，我可以自动停止/开始跟踪。

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

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

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

选项3 如果您距精选路线超过x米，则会自动停止跟踪步行距离。但是，这需要进行一些计算。

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

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

Answer 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()位置会将当前位置推送到名为Array的{{1}}中。

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

locationHistory

我将获取当前位置和先前位置之间的距离，并将其添加到我的let currentLocation = turf.point(lastpoint); let previousLocation = turf.point(previouspoint); let distance = turf.distance(previousLocation, currentLocation);中。

如果用户将应用程序放在口袋里，然后“在线”返回（打开应用程序），它将占用当前位置和先前位置之间的距离。它不是非常准确（因为它只会在两点之间走直线（但是我做了一些测试，这是我对Web应用程序所做的最好的测试。如果用户阻止手机进入，则结果将更加准确）锁定模式。

当您点击开始时，我在服务器（Firebase Server Timestamp）上创建了一个时间戳记，因此我知道用户何时开始跟踪。我也知道系统中最长的路线约为11公里，这意味着应该在3小时内步行即可。

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

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

在网络应用中计算步行距离的建议

1 个答案: