如何基于用户经纬度按距离升序显示最近的三个地点？

要实现按距离升序显示最近的三个地点，我们需要先计算用户位置到所有门店的距离，排序后取前三个，而不是只取单个最近的。这里是具体的修改步骤和完整代码：

步骤说明 #

1. 计算所有门店的距离：遍历storeLocations对象，用geolib.getDistance计算用户位置到每个门店的距离，把城市名和距离存成数组。
2. 按距离排序：对数组按距离从小到大排序。
3. 取前三个并展示：提取排序后的前三个元素，拼接成合适的格式显示在页面上。

修改后的完整代码 #

<div class="container p-3"> 
  <button onclick="getLocation()" class="mb-2">Find city nearest you</button> 
  <p id="closest"> </p> 
</div>

var x = document.getElementById("closest");
var storeLocations = {
  "Atlanta": {latitude: 33.7489954, longitude: -84.3879824},
  "Chicago": {latitude: 41.8781136, longitude: -87.6297982},
  "Dallas": {latitude: 32.7766642, longitude: -96.7969879},
  "Houston": {latitude: 29.7604267, longitude: -95.3698028},
  "Los Angeles": {latitude: 34.0522342, longitude: -118.2436849},
  "New York": {latitude: 40.7127837, longitude: -74.0059413},
  "Philadelphia": {latitude: 39.9525839, longitude: -75.1652215},
  "Phoenix": {latitude: 33.4483771, longitude: -112.0740373},
  "Seattle": {latitude: 47.6062095, longitude: -122.3320708}
}

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(findNearestStores);
  } else {
    x.innerHTML = "Location: Washington, D.C.";
  }
}

function findNearestStores(position) {
  const userCoords = {latitude: position.coords.latitude, longitude: position.coords.longitude};
  
  // 计算所有门店的距离，生成包含城市和距离的数组
  const storeDistances = Object.entries(storeLocations).map(([city, coords]) => {
    return {
      city: city,
      distance: geolib.getDistance(userCoords, coords)
    };
  });
  
  // 按距离升序排序，最近的排在最前面
  storeDistances.sort((a, b) => a.distance - b.distance);
  
  // 取前三个地点，拼接成友好的显示文本
  const topThree = storeDistances.slice(0, 3);
  let displayText = "Nearest Locations:<br>";
  topThree.forEach((store, index) => {
    // 把米转换成公里并取整，让距离显示更直观
    displayText += `${index + 1}. ${store.city} (${Math.round(store.distance / 1000)} km)<br>`;
  });
  
  x.innerHTML = displayText;
}

关键部分解释 #

• Object.entries(storeLocations)：把门店对象转换成键值对数组，方便我们遍历每个城市和对应的坐标信息。
• geolib.getDistance：计算用户位置和门店坐标之间的直线距离（单位是米），我们后续转换成公里，让用户更容易理解。
• sort((a, b) => a.distance - b.distance)：通过比较距离值，实现数组按距离从小到大排序，确保最近的门店排在最前面。
• slice(0, 3)：提取排序后的前三个元素，也就是距离用户最近的三个地点。

这样修改后，点击按钮就能清晰看到距离最近的三个城市，还附带显示距离，用户体验会好很多~

内容的提问来源于stack exchange，提问作者user3120861