按距离排序地点JSON，获取最近3个地点并在HTML展示的JS实现

嘿，这个问题我熟！在JavaScript里实现找三个最近地点的思路和你Java里的逻辑一致——先计算所有地点到当前位置的距离，排序后取前top3，不过JS的数组原生方法能让这个过程更简洁直观，不用手动写太多遍历排序的代码。

核心步骤拆解 #

1. 准备地点数据：把所有待筛选的地点整理成数组，每个元素包含经纬度和其他你需要展示的信息（名称、地址等）。
2. 计算距离：用经纬度计算每个地点到当前位置的距离（推荐用Haversine公式保证精度，或者用简化的距离平方提升性能）。
3. 排序筛选：给所有地点按距离从小到大排序，然后取前3个元素。
4. 渲染到HTML：把筛选出的三个地点信息动态插入到页面中。

完整代码示例 #

function nearestLocation(position) {
  // 获取当前位置的经纬度
  const currentLng = position.coords.longitude;
  const currentLat = position.coords.latitude;

  // 替换成你实际的地点数据源（可以是本地数组，也可以是API返回结果）
  const locations = [
    { name: "三里屯商圈", lng: 116.4425, lat: 39.9376 },
    { name: "国贸CBD", lng: 116.4551, lat: 39.9042 },
    { name: "王府井步行街", lng: 116.4038, lat: 39.9152 },
    { name: "故宫博物院", lng: 116.3972, lat: 39.9075 },
    { name: "颐和园", lng: 116.2727, lat: 39.9928 }
  ];

  // 计算两点距离的工具函数（Haversine公式，返回公里数）
  function calculateDistance(lat1, lon1, lat2, lon2) {
    const earthRadius = 6371; // 地球平均半径（公里）
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;
    const a = 
      Math.sin(dLat/2) * Math.sin(dLat/2) +
      Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
      Math.sin(dLon/2) * Math.sin(dLon/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return earthRadius * c; // 返回真实距离（公里）
  }

  // 给每个地点添加距离属性，然后按距离从小到大排序
  const sortedLocations = locations
    .map(location => ({
      ...location,
      distance: calculateDistance(currentLat, currentLng, location.lat, location.lng)
    }))
    .sort((a, b) => a.distance - b.distance);

  // 取前3个最近的地点
  const top3Nearest = sortedLocations.slice(0, 3);

  // 渲染到HTML页面（假设你有一个id为"nearest-locations"的容器）
  const container = document.getElementById("nearest-locations");
  container.innerHTML = ""; // 清空原有内容

  top3Nearest.forEach((loc, index) => {
    const item = document.createElement("div");
    item.className = "location-item";
    item.innerHTML = `
      <h4>${index + 1}. ${loc.name}</h4>
      <p>距离: ${loc.distance.toFixed(2)} 公里</p>
      <!-- 这里可以添加更多你需要展示的信息，比如地址、联系方式等 -->
    `;
    container.appendChild(item);
  });
}

优化小技巧 #

如果你的地点数据量很大，想要提升性能，可以用距离平方来排序（因为开根号是单调函数，排序结果完全一致，但计算更快）：

// 简化的距离平方计算（仅用于排序，不需要真实距离时用这个）
function calculateDistanceSquared(lat1, lon1, lat2, lon2) {
  const dLat = lat2 - lat1;
  const dLon = lon2 - lon1;
  return dLat * dLat + dLon * dLon;
}

排序时用这个值，最后如果需要显示真实距离，再给前3个地点计算一次实际距离即可。

为什么这是最简方案？ #

JS的数组原生方法map、sort、slice已经帮我们封装了大部分逻辑，不需要像Java那样手动写循环和排序算法，代码简洁易读，同时也能保证逻辑清晰。只要把你的地点数据源替换进去，就能直接用啦～

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