Javascript 地理定位监视位置距离计算器

我使用geolocation获取用户的当前位置，并使用watchPosition方法对其进行监视。但是，是否有一种方法可以计算用户起始位置和当前位置之间的距离？下面是我的代码：

var x = document.getElementById("info");

function getLocation() {
    if(navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition, showError, {
            enableHighAccuracy: true,
            maximumAge: 60000,
            timeout: 27000
        })
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
var flightPathCoordinates = [];

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude + "<br>Accuracy: " + position.coords.accuracy + "<br>Altitude: " + position.coords.altitude + "<br>Altitude Accuracy: " + position.coords.altitudeAccuracy + "<br>Heading: " + position.coords.heading + "<br>Speed: " + position.coords.speed + "<br>Speed (mph): " + position.coords.speed * 2.2369 + "<br>Speed (km): " + position.coords.speed * 3.6 + "<br>Timestamp: " + new Date(position.timestamp).toLocaleString() + "<br>Distance Travelled (km): " + calculateDistance(position.coords.latitude, position.coords.longitude, position.coords.latitude, position.coords.longitude);
    // Distance Calculator

    function calculateDistance(lat1, lon1, lat2, lon2) {
        if(typeof (Number.prototype.toRad) === "undefined") {
            Number.prototype.toRad = function () {
                return this * Math.PI / 180;
            }
        }
        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;
    }
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('mapholder')
    var myOptions = {
        center: latlon,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    }
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);

任何帮助都将不胜感激，因为我对这方面还很陌生

---

谢谢

你可以使用哈弗森公式

rad = function(x) {return x*Math.PI/180;}

distHaversine = function(p1, p2) { // Points are Geolocation.coords objects
  var R = 6371; // earth's mean radius in km
  var dLat  = rad(p2.latitude - p1.latitude);
  var dLong = rad(p2.longitude - p1.longitude);

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;

  return d.toFixed(3);
}

两个提示

typeof不是一个函数。像这样使用它：键入某物 不要在侦听器中放置多填充。每次侦听器激发时，您都在重复polyfill操作。

---

你可以使用哈弗森公式

rad = function(x) {return x*Math.PI/180;}

distHaversine = function(p1, p2) { // Points are Geolocation.coords objects
  var R = 6371; // earth's mean radius in km
  var dLat  = rad(p2.latitude - p1.latitude);
  var dLong = rad(p2.longitude - p1.longitude);

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;

  return d.toFixed(3);
}

两个提示

typeof不是一个函数。像这样使用它：键入某物 不要在侦听器中放置多填充。每次侦听器激发时，您都在重复polyfill操作。

---

这是从GoogleMapsAPI改编而来的，并经过修改以独立于库

示例-计算从纽约市中心到费城市中心的距离。 JS

---

结果是80.524英里或129.583公里。

这是从谷歌地图API改编而来的，并经过修改，独立于图书馆

示例-计算从纽约市中心到费城市中心的距离。 JS

---

结果是80.524英里或129.583公里。

感谢您的快速响应！我没有使用getCurrentPosition方法，而是使用watchPosition。你认为我需要使用这两种方法吗？@LiamO'Byrne是的，你可以使用这两种方法。谢谢你的快速回复Mohsen！我没有使用getCurrentPosition方法，而是使用watchPosition。你认为我需要使用这两种方法吗？@LiamO'Byrne是的，你可以使用这两种方法。谢谢你的快速回复库齐！我看了你提供的链接。它们按预期工作，但不使用地理定位。我很困惑如何操作它以适应上面的代码。很高兴我能帮上忙。使用我的示例，只需将distanceFrom函数传递给一个对象，该对象包含点A的坐标和点B的坐标。在您的情况下，将第一组坐标存储到起始位置，然后，以下任何坐标都将是第二组坐标。每次新的第二组坐标发生变化并通过distanceFrom函数与第一组坐标进行比较时，返回的距离将反映这一点。因此，您的意思是我需要首先使用getCurrentPosition获取用户位置。然后，使用watchPosition精确地监视用户的移动。您可以在第一次运行watchPosition时，将结果存储为初始位置，然后继续更新新位置。但使用这两种方法都会非常有效。非常感谢您抽出时间。我会把你的反馈意见作为答案，所以别担心！我还有一个问题。如何存储watchPosition的初始位置结果？感谢您的快速响应Couzzi！我看了你提供的链接。它们按预期工作，但不使用地理定位。我很困惑如何操作它以适应上面的代码。很高兴我能帮上忙。使用我的示例，只需将distanceFrom函数传递给一个对象，该对象包含点A的坐标和点B的坐标。在您的情况下，将第一组坐标存储到起始位置，然后，以下任何坐标都将是第二组坐标。每次新的第二组坐标发生变化并通过distanceFrom函数与第一组坐标进行比较时，返回的距离将反映这一点。因此，您的意思是我需要首先使用getCurrentPosition获取用户位置。然后，使用watchPosition精确地监视用户的移动。您可以在第一次运行watchPosition时，将结果存储为初始位置，然后继续更新新位置。但使用这两种方法都会非常有效。非常感谢您抽出时间。我会把你的反馈意见作为答案，所以别担心！我还有一个问题。如何存储watchPosition的初始位置结果？