使用地理定位 使用 JavaScript（组合脚本）向 Web 访问者显示最近的位置

Question

我目前正在重做我公司的网站。一旦有人加载我们新网站的任何页面，就在位置精确图标旁边的顶部栏中显示离他们最近或在企业服务半径 (±20mi) 范围内的位置，这真是太酷了。几天来，我一直在寻找如何找到一种方法来实现这一点，而 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 可以提供这些，我只是无法让它们朝着同一个共同目标一起工作。

谢谢！

Answer 1

附件是我一直在寻找的解决方案，以防其他人陷入同样的​​困境。请记住，这只有在您的 HTML 5 网站上有有效的 SSL 证书时才会起作用。

var lat = 0;
var lng = 0;
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 = ``;
    mapLink.textContent = ``;
    lat = position.coords.latitude;
    lng = position.coords.longitude;
    showNearestLocations();
  }

  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);


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
    }

function showNearestLocations() {
    var data = [{
        "lat": 36.5983825,
        "lng": -82.1828577,
        "location": "Bristol",
        "link": "bristol",
    }, {
        "lat": 36.7053664,
        "lng": -81.999551,
        "location": "Abingdon",
        "link": "abingdon",
    }, {
        "lat": 35.9120595,
        "lng": -84.0979276,
        "location": "West Knoxville",
        "link": "west-knoxville",
    }, {
        "lat": 35.8718708,
        "lng": -83.5642387,
        "location": "Sevierville",
        "link": "sevierville",
    }];

    var html = "";
    var poslat = lat;
    var poslng = lng;
    
    var found = false;
    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].link + '" target="_blank"><i class="icon-location"></i>' + data[i].location + '</a> ';
          found = true;
        }
    }
    
    $('#nearestLocation').html(html);
    if (!found) {
      $('#nearestLocation').html("no near location found");
    }
}

#map-link {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id = "find-me">Show my nearest locations</button> <span id="nearestLocation"></span><p id = "status"></p>
<a id = "map-link" target="_blank"></a>