Блог

В настоящее время я работаю в многосайтовой сети WordPress. Каждый веб-сайт представляет собой местоположение с различными полями параметров ACF, связанными с именем, адресом, номером телефона и так далее. Мы проходим по сети и выводим все местоположения в государственном порядке. У нас есть функция поиска, которая извлекает местоположения в пределах искомого радиуса. Все это работает, но нам нужно уметь выводить расстояние, а также сортировать по расстоянию. В настоящее время это просто сортировка только по алфавиту. Я не могу получить расстояние для вывода в атрибуте data-is-close.

Я попытался добавить следующее:

 if (d <= 80.4672) {
   status = true;
   //Here is my attribute
   $('.location-state').attr('data-is-close', d);
   }else{}
   return status;
    }
 

Проблема в том, что он просто добавляет одну и ту же переменную расстояния к каждому элементу li.

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
//Get lat and lon from an address
function advancedSearch() {
var closeCounter = false;
var usrInput = document.getElementById("advanced-search").value;
var apiURL = 'https://maps.googleapis.com/maps/api/geocode/json?address=' usrInput 'amp;key=xxxxx';
$.get(apiURL,function(data){
if (data.results[0] != null) {
var inLat = data.results[0].geometry['location'].lat;
var inLng = data.results[0].geometry['location'].lng;
// console.log(inLat);
// console.log(inLng);
// calcCrow(inLat,inLng,59.3225525,13.4619422);
var matches = document.getElementsByClassName("location-state");
for (var i=0; i<matches.length; i  ) {
var locLat = matches.item(i).dataset['lat'];
var locLon= matches.item(i).dataset['lon'];
var isClose = calcCrow(inLat,inLng,locLat,locLon);

if (isClose == false) {
matches.item(i).style.display = "none";
}else{
matches.item(i).style.display = "block";
closeCounter = true;
}
}

// console.log(matches);
if (closeCounter == false) {
document.getElementById('no_results').style.display = "block";
}else{
document.getElementById('no_results').style.display = "none";

}
}else{
alert("The address entered was not found, try using your city name instead.");
}
},'json');
}

//This function takes in latitude and longitude of two location and returns the distance between them as the crow flies (in Miles)
//Potential Error MArgin 3.99999 KM or 2.48548 Miles
function calcCrow(lat1, lon1, lat2, lon2)
{
var R = 6371; // km
var dLat = toRad(lat2-lat1);
var dLon = toRad(lon2-lon1);
var lat1 = toRad(lat1);
var lat2 = toRad(lat2);

var a = Math.sin(dLat/2) * Math.sin(dLat/2)  
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
console.log(d);
//console.log(d*0.621371)
var status = false;
if (d <= 80.4672) {
status = true;
//Here is my attribute
$('.location-state').attr('data-is-close', d);
}else{}
return status;
}

// Converts numeric degrees to radians
function toRad(Value)
{
return Value * Math.PI / 180;
}
</script>
<div class="container p-0">
<ul class="subsites">
<?php
foreach ($loc_data as $key => $value) {
$phone_temp = $loc_data[$key][$key2]['loc_phone'];
echo '<li id="maplocationsectionbottom-marker-'.$loc_data[$key][$key2]['loc_ab_state'].''.$counter  .'" data-lat="'.$loc_data[$key][$key2]['loc_lat'].'" data-lon="'.$loc_data[$key][$key2]['loc_lon'].'" data-is-close="" class="bi-'.$loc_data[$key][$key2]['loc_id'].' location-state location-state-'.$loc_data[$key][$key2]['loc_ab_state'].' locationcols">';
echo '<span class="h4 nomargin">'.$loc_data[$key][$key2]['loc_name'].' '.$stat.'</span>';
echo '<div itemscope="" itemtype="http://schema.org/LocalBusiness">';
echo '<div class="business-data">';
echo '<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">';
echo '<div class="address nomargin">'.$loc_data[$key][$key2]['loc_details'].'<span itemprop="streetAddress">'.$loc_data[$key][$key2]['loc_address'].'</span><br><span itemprop="addressLocality">'.$loc_data[$key][$key2]['loc_city'].'</span>, <span itemprop="addressRegion">'.$loc_data[$key][$key2]['loc_ab_state'].'</span> <span itemprop="postalCode">'.$loc_data[$key][$key2]['loc_zip'].'</span></div>';
echo '<p class="nomargin loc-phone"><span itemprop="telephone">'.$phone_temp.'</span></p>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '<a target="_blank" href="'.$loc_data[$key][$key2]['loc_url'].'" class="btn btn-primary with-arrow">View Location <span class="icon-arrow"></span></a>';
echo '</li>';
array_push($active_states,$loc_data[$key][$key2]['loc_ab_state']);
}
}
?>


</ul>