Я сейчас нахожусь в процессе переделки сайта моей компании.Было бы очень здорово, как только кто-то загрузит любую страницу нашего нового сайта, отобразить местоположение, которое является либо ближайшим к ним, либо в пределах радиуса обслуживания предприятия (± 20 миль) в верхней панели рядом со значком местоположения.Я искал несколько дней, чтобы найти способ сделать это возможным, и JavaScript, кажется, единственный способ сделать это.Я новичок в JS, поэтому я не уверен, что это лучший способ сделать это.
Мне нужно объединить следующие скрипты, которые работают безупречно по отдельности, но не вместе в данный момент.
////// SCRIPT 1 /////////
function geoFindMe() {
const status = document.querySelector('#status');
const mapLink = document.querySelector('#map-link');
mapLink.href = '';
mapLink.textContent = '';
function success(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
status.textContent = '';
mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
}
function error() {
status.textContent = 'Unable to retrieve your location';
}
if (!navigator.geolocation) {
status.textContent = 'Geolocation is not supported by your browser';
} else {
status.textContent = 'Locating…';
navigator.geolocation.getCurrentPosition(success, error);
}
}
document.querySelector('#find-me').addEventListener('click', geoFindMe);
//////////// SCRIPT 2 ////////////
function distance(lat1, lon1, lat2, lon2, unit) {
var radlat1 = Math.PI * lat1/180
var radlat2 = Math.PI * lat2/180
var theta = lon1-lon2
var radtheta = Math.PI * theta/180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
if (dist > 1) {
dist = 1;
}
dist = Math.acos(dist)
dist = dist * 180/Math.PI
dist = dist * 60 * 1.1515
if (unit=="K") { dist = dist * 1.609344 }
if (unit=="N") { dist = dist * 0.8684 }
return dist
}
var data = [{
"lat": "36.5983825",
"lng": "-82.1828577",
"location": "Bristol"
}, {
"lat": "36.7053664",
"lng": "-81.999551",
"location": "Abingdon"
}, {
"lat": "35.9120595",
"lng": "-84.0979276",
"location": "West Knoxville"
}, {
"lat": "35.8718708",
"lng": "-83.5642387",
"location": "Sevierville"
}];
var html = "";
var poslat = 36.5983825;
var poslng = -82.1828577;
for (var i = 0; i < data.length; i++) {
// if this location is within 0.1KM of the user, add it to the list
if (distance(poslat, poslng, data[i].lat, data[i].lng, "M") <= 20) {
html += '<a href="/' + data[i].location + '" target="_blank"><i class="icon-location"></i>' + data[i].location + '</a> ';
}
}
$('#nearestLocation').append(html);
///// SCRIPT 1 //////<br><br>
<button id = "find-me">Show my location</button><br/>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>
///// SCRIPT 2 //////<br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nearestLocation"></div>
<br>
<br>
Сценарий 1 получает текущее местоположение пользователя по запросу, а сценарий 2 сравнивает заданный лат / лонг с остальными, чтобы найти ближайший набор (и) в пределахрадиусом в 20 миль.
У нас есть только 14 мест в США, и именно поэтому нам нужно использовать GeoLocation, а не GeoIP.GeoIP не достаточно точен для нас.
postlat и postlng - это то, что Script 2 использует для сравнения с заданными координатами lat / lng, и Script 1 может предоставить их, я просто не могу заставить их работать вместе в направлениита же общая цель.
Спасибо!