Question

使用javascript我得到了一些固定坐标之间的距离，这是我当前的位置，现在我怎样才能按距离订购它们（div）？

这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>

<script>
  window.onload = function() {
    var startPos;

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        startPos = position;
        document.getElementById("startLat").innerHTML = startPos.coords.latitude;
        document.getElementById("startLon").innerHTML = startPos.coords.longitude;
      }, function(error) {
        alert("Error occurred. Error code: " + error.code);
        // error.code can be:
        //   0: unknown error
        //   1: permission denied
        //   2: position unavailable (error response from locaton provider)
        //   3: timed out
      });

      navigator.geolocation.watchPosition(function(position) {
        document.getElementById("currentLat").innerHTML = position.coords.latitude;
        document.getElementById("currentLon").innerHTML = position.coords.longitude;
        document.getElementById("distance").innerHTML =
          calculateDistance(41.917797, 12.491601, position.coords.latitude, position.coords.longitude);

        document.getElementById("distance1").innerHTML =
          calculateDistance(41.92775, 12.5114508, position.coords.latitude, position.coords.longitude);

        document.getElementById("distance2").innerHTML =
          calculateDistance(41.9484339, 12.4583905, position.coords.latitude, position.coords.longitude);   

        document.getElementById("distance3").innerHTML =
          calculateDistance(41.9433405, 12.4739446, position.coords.latitude, position.coords.longitude);               
      });
    }
  };


  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 = Math.floor(R * c*10)/10;
    return d;
  }
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
      </script>

<style>
  #tripmeter {
    border: 3px double black;
    padding: 10px;
  }

  #tripmeter_1 {
    border: 6px double black;
    padding: 10px;
  }

  #tripmeter_2 {
    border: 9px double black;
    padding: 10px;
  }

  #tripmeter_3 {
    border: 12px double black;
    padding: 10px;
  }
  p {
    color: #222;
    font: 14px Arial;
  }

  span {
    color: #00C;
  }
</style>

</head>

<body>

<div id="tripmeter">
<p style="display:none">
    <span id="currentLat"></span><span id="currentLon"</span>
  </p>

  <p>
    Distance from starting location:<br/>
    <span id="distance"></span> km
  </p>
 </div>

<div id="tripmeter_1" style="margin-top:20px">

  <p style="display:none">
    <span id="currentLat"></span><span id="currentLon"</span>
  </p>

  <p>
    Distance from starting location:<br/>
    <span id="distance1"></span> km
  </p>
</div>

<div id="tripmeter_2" style="margin-top:20px">

  <p style="display:none">
    <span id="currentLat"></span><span id="currentLon"</span>
  </p>
 <div id="list">
  <p>
    Distance from starting location:<br/>
    <span id="distance2"></span> km
  </p></div>
</div>

 <div id="tripmeter_3" style="margin-top:20px">

  <p style="display:none">
    <span id="currentLat"></span><span id="currentLon"</span>
  </p>

  <p>
    Distance from starting location:<br/>
   <span id="distance3"></span> km
  </p>
</div>

</body>
</html>

我希望它们以距离的顺序出现;

非常感谢！

Answer 1

您可以使用HTML类名来提供帮助。首先，给每个div一个特定的类属性（用于所有'tripmeter'div的相同值）例如：<div id="..." class="tripmeter" style="...">

然后，给每个距离跨度一个可识别的类属性（再次，由所有距离跨度使用）。例如：<span id="..." class="distance">

然后，一点Javascript：

function sortByDistance () {
   var tmDivs = document.getElementsByClassName("tripmeter");

   // getElementsByClassName returns an HTMLCollection object
   // similar to an Array, but does not have a sort function.
   // so, convert to an array.
   tmDivs = [].slice.call(tmDivs);

   // sort the Array
   tmDivs.sort(compareFn);

   // add the divs back into their parent in order
   for (var c = 0, cl = tmDivs.length; c < cl; c++) {
      tmDivs[c].parentNode.appendChild(tmDivs[c]);
   }
}

function compareFn (a, b) {
   var aSpan = a.getElementsByClassName("distance")[0],
       bSpan = b.getElementsByClassName("distance")[0];

   if (aSpan && bSpan) {
      return parseInt(aSpan.innerHTML, 10) - parseInt(bSpan.innerHTML, 10);
   } else {
      return 0;
   }
}

有关排序数组和使用自己的比较函数的更多详细信息，请参阅MDN：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

我怎么能按距离对这个div进行排序？

1 个答案: