Как я могу сортировать этот div по расстоянию?

С javascript Я получил расстояние между некоторыми фиксированными координатами, уважающими мое текущее местоположение, теперь, как я могу их заказать (div) по расстоянию?Как я могу сортировать этот 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>

Я хотел бы представить их в порядке расстояния;

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

источник

2015-02-22 Antonio C.

Что такое не работает в вашем коде точно? Что вы уже пробовали? – dethtron5000

Код работает хорошо .. У меня есть 4 результата (в км), и я хочу сортировать их по расстоянию .. Я попытался с сортировкой данных, но без результата. –

Вы можете увидеть код, который работает здесь: [link] (http://www.mobyleme.com/prova) –

Вы можете использовать имена классов HTML, чтобы много помогать. Во-первых, дайте каждому 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

источник

2015-02-22 04:22:47 DRAB

Он выглядит идеально, но я попытался сделать это, и divs не отсортированы. Можете ли вы показать мне мой код? Спасибо огромное! –

Ну, я использовал «...» в атрибутах, которые я не хотел печатать. Вам нужно будет пройти через свой собственный код и добавить атрибут «class». Я просто предоставлял семантику в разметке HTML, но Javascript должен работать. – DRAB

Как я могу сортировать этот div по расстоянию?

ответ

Смежные вопросы