Расстояние трека в HTML5 - PullRequest
Новая
       61

Расстояние трека в HTML5

0 голосов
/ 14 июля 2020

Я использовал смесь из примера геолокации W3 C и примера, предоставленного HTML5rocks, и попытался создать небольшое приложение HTML5, которое отслеживает пройденное расстояние. Я использую следующий код:

... 

<!DOCTYPE html>
<html>
<body>

<p>Click button to track your trip.</p>

<button onclick="getLocation()">Start Tracking</button>

<div id="startLat"></div><p />
<div id="startLon"></div><p />
<div id="distance"></div>


<script>

function getLocation() {
    var distance_tmp;
    
  if (navigator.geolocation) {
    var startPos;
  navigator.geolocation.getCurrentPosition(function(position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = "Start Latitude: " + startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = "Start Longitude: " + startPos.coords.longitude;
  });
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
  
  navigator.geolocation.watchPosition(function(position) {
  distance_tmp = calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                        position.coords.latitude, position.coords.longitude);
  distance_tmp = Math.round((distance_tmp + Number.EPSILON) * 100) / 100;
  document.getElementById('distance').innerHTML = distance_tmp + " km";
});

}

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

</script>

</body>
</html>

...

Этот скрипт, очевидно, вычисляет расстояние между моей начальной позицией и фактической позицией, и это работает пока все в порядке. Однако, если вы, например, бежите по кругу, расстояние уменьшается по мере приближения к исходной позиции.

Как я могу измерить реальное расстояние, чтобы оно показывало пройденное расстояние, даже если я бегу в кругах? Я думал, что могу просто суммировать различные временные расстояния, но получаю ошибку NaN.

Большое спасибо.

...