Question

要解决此问题，我一直在尝试将变量提供给选项列表的值属性，并根据这些值对其进行排序。一切都适用于手动分配的值，例如

<option id="link1" value="1">A</option>

但我似乎无法弄清楚如何将每个选项分配给我当前位置的计算距离并相应地进行排序。

以下代码应该使这个问题更加清晰：

＆＃13;

const navToSelection = _ => {
  const el = document.getElementById("panel_link_library")
  const val = el.options[el.selectedIndex].id
  window.location.href = val // That's it!
}
$("#panel_link_library").html($("#panel_link_library option").sort(function(a, b) {
  return parseInt($(a).val()) == parseInt($(b).val()) ? 0 : parseInt($(a).val()) < parseInt($(b).val()) ? -1 : 1;
}));

function distance(lon1, lat1, lon2, lat2) {
  var R = 6371; // Radius of the earth in km
  var dLat = (lat2 - lat1).toRad(); // Javascript functions in radians
  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; // Distance in km
  return d;
}

/** Converts numeric degrees to radians */
if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}

var test_1 = window.navigator.geolocation.getCurrentPosition(function(pos_1) {
  console.log(pos_1);
  console.log(
    distance(pos_1.coords.longitude, pos_1.coords.latitude, 42.37, 71.03)
  );
  return pos_1
});

var test_2 = window.navigator.geolocation.getCurrentPosition(function(pos_2) {
  console.log(pos_2);
  console.log(
    distance(pos_2.coords.longitude, pos_2.coords.latitude, 33.37, 71.03)
  );
  return pos_2
});

＆＃13;

<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>


<div class="parent_mob">
  <div>
    <div>
      <select class="panel_link_button_2" id="panel_link_library" name="p_links">
        <option id="panel_link_library" value="">Choose a location</option>
        <option id="link1" value="test_1">A</option>
        <option id="link2" value="test_2">B</option>
    </select>
    </div>
  </div>
  <div>
    <div id="abc" class="panel_link_button" onclick="navToSelection()">Place a Pickup Order</div>
  </div>
</div>

＆＃13;

我怀疑

一定有问题

Answer 1

我已对您的代码进行了一些更改。我在mi PC上尝试过并且工作正常。不要在片段中尝试，因为不起作用。复制所有代码，然后将其粘贴到计算机的html文件中，试试并运行。

<html>
<head>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

<div class="parent_mob">   
<div >
  <div>
    <select class="panel_link_button_2" id="panel_link_library" name="p_links">
        <option id="panel_link_library" value="">Choose a location</option>
        <option id="link1" value="test_1">A</option>
        <option id="link2" value="test_2">B</option>
    </select>
</div>
</div>
<div>
 <div id="abc" class="panel_link_button" onclick="navToSelection()">Place a Pickup Order</div>
 </div>
</div> 

<script>
  
  const navToSelection = _ => {
  const el = document.getElementById("panel_link_library")
  const val = el.options[el.selectedIndex].id
  window.location.href = val // That's it!
}

</script>

<script>

function distance(lon1, lat1, lon2, lat2) {
  var R = 6371; // Radius of the earth in km
  var dLat = (lat2-lat1).toRad();  // Javascript functions in radians
  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; // Distance in km
  return d;
}

/** Converts numeric degrees to radians */
if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}



 var test_1;
window.navigator.geolocation.getCurrentPosition(function(pos_1) { 
  test_1 = distance(pos_1.coords.longitude, pos_1.coords.latitude, 44.37, 71.03);
});

console.log(test_1)


 var test_2;
 
 window.navigator.geolocation.getCurrentPosition(function(pos_2) {
  console.log(pos_2); 

  return distance(pos_2.coords.longitude, pos_2.coords.latitude, 30.37, 71.03)

});
console.log(test_2)




</script>

<script>
    var setted = false;
    function set_values(){
        $('#link1').val(test_1);
        if(!test_1){
				//
		  }else{
			  //if geolocation fail then test_1 = ''
			  //then try again the geolocation
			  if(test_1 == ''){
				window.navigator.geolocation.getCurrentPosition(function(pos_1) { 
					test_1 = distance(pos_1.coords.longitude, pos_1.coords.latitude, 44.37, 71.03);
				});
			   //if OK stop the setTimeout
			  }else{
				 setted = true;
				 console.log($('#link1').val());
				 console.log('Te value for test_1 has been setted');
			  }
		  }

    }

    $(document).ready(function(){
        setTimeout(function(){
            if(!test_1 || !setted){
                console.log('The value not setted up ... I will try again in one second');
                set_values()
            }else{
                console.log('Te value for test_1 has been setted');
            }   
        },1000);
    });

</script>


<script>
  $("#panel_link_library").html($("#panel_link_library option").sort(function (a, b) {
    return parseInt($(a).val()) == parseInt($(b).val()) ? 0 : parseInt($(a).val()) < parseInt($(b).val()) ? -1 : 1;
}));
</script>

</body>
</html>

Answer 2

这段代码实现了我试图通过解决方案实现的目标。不在代码段中运行，但如果您在计算机/服务器上运行它，它应该可以正常工作：

<html>
<head>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">
  
  </script>
   
  


</head>
<body>

<div class="parent_mob">   
<div >
  <div>
    <select class="panel_link_button_2" id="panel_link_library" name="p_links">
      <option id="panel_link_library" value="0">Choose a location</option>
      <option id="link2" >B</option>
      <option id="link1" >A</option> 
       <option id="link3" >C</option> 
       <option id="link4" >D</option> 
       <option id="link5" >E</option> 
    </select>
</div>
</div>
<div>
 <div id="abc" class="panel_link_button" onclick="navToSelection()">Place a Pickup Order</div>
 </div>
</div> 
  
  
  
    <script>
  
  const navToSelection = _ => {
  const el = document.getElementById("panel_link_library")
  const val = el.options[el.selectedIndex].id
  window.location.href = val // That's it!
}

</script>

<script>

function distance(lon1, lat1, lon2, lat2) {
  var R = 6371; // Radius of the earth in km
  var dLat = (lat2-lat1).toRad();  // Javascript functions in radians
  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; // Distance in km
//  console.log("navigator.geolocation d "+d);
  return d;
  
}

/** Converts numeric degrees to radians */
if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}



 
 window.navigator.geolocation.getCurrentPosition(function(pos_1) { 
   console.log("navigator.geolocation start ");
  document.getElementById('link1').value = distance(pos_1.coords.longitude, pos_1.coords.latitude, 35.43,-120.34);
   console.log(pos_1.coords.longitude);
   console.log(pos_1.coords.latitude)
  document.getElementById('link2').value = distance(pos_1.coords.longitude, pos_1.coords.latitude, 35.43,-119.23);
   document.getElementById('link3').value = distance(pos_1.coords.longitude, pos_1.coords.latitude, 35.22,-118.32);
   document.getElementById('link4').value = distance(pos_1.coords.longitude, pos_1.coords.latitude, 34.06,-118.22);
   document.getElementById('link5').value = distance(pos_1.coords.longitude, pos_1.coords.latitude, 33.98,-118.44);
  
   $("#panel_link_library").html($("#panel_link_library option").sort(function (a,b) {
    
 
    return parseInt($(a).val()) == parseInt($(b).val()) ? 0 : parseInt($(a).val()) < parseInt($(b).val()) ? -1 : 1; 
  
 
}));
document.getElementById("panel_link_library").selectedIndex = "0";
});



</script>
  
  

</body>
</html>

按地理位置/邻近度排序地点列表

2 个答案: