基于地理位置对城市数组排序的JavaScript+HTML5 Geolocation实现

嘿，这个需求很实用嘛！我来一步步教你怎么实现——核心逻辑就是先获取用户当前的地理位置，计算每个城市和该位置的直线距离，最后按距离从近到远排序即可。下面是完整的实现方案：

1. 获取用户当前地理位置 #

首先用HTML5的navigator.geolocation.getCurrentPosition方法获取用户位置，记得处理授权成功和失败的情况（比如用户拒绝授权）：

// 触发位置获取
navigator.geolocation.getCurrentPosition(
  // 成功获取位置后的回调
  (position) => {
    const userLat = position.coords.latitude; // 用户纬度
    const userLng = position.coords.longitude; // 用户经度
    // 拿到位置后执行排序逻辑
    sortLocationsByDistance(userLat, userLng);
  },
  // 获取失败的回调
  (error) => {
    console.error('位置获取失败:', error.message);
    alert('无法获取你的位置，请检查位置权限设置或确保设备定位开启');
  }
);

2. 实现球面距离计算函数 #

因为地球是球体，用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; // 返回距离（千米）
}

3. 对城市列表按距离排序 #

接下来给每个城市计算与用户位置的距离，再用数组的sort方法按距离从小到大排序，最后可以把结果渲染到页面上：

// 你的示例城市数据
var locations = [
  {"name":"location1", "latitude" :"31.413165123", "longitude":"40.34215241"},
  {"name":"location2", "latitude" :"31.413775453", "longitude":"40.34675341"}
];

// 排序函数
function sortLocationsByDistance(userLat, userLng) {
  // 给每个城市添加distance属性，存储计算出的距离
  const locationsWithDistance = locations.map(location => {
    const distance = calculateDistance(
      userLat,
      userLng,
      parseFloat(location.latitude), // 注意把字符串转成数字
      parseFloat(location.longitude)
    );
    return { ...location, distance }; // 保留原属性，新增distance
  });

  // 按距离从小到大排序（a.distance - b.distance 是升序，反过来就是降序）
  const sortedLocations = locationsWithDistance.sort((a, b) => a.distance - b.distance);

  // 输出到控制台查看结果
  console.log('按距离排序后的城市:', sortedLocations);
  
  // 可选：把结果渲染到HTML页面
  renderSortedLocations(sortedLocations);
}

// 渲染排序结果到页面的函数
function renderSortedLocations(sortedList) {
  const container = document.getElementById('location-list');
  container.innerHTML = ''; // 清空原有内容
  
  sortedList.forEach(location => {
    const item = document.createElement('div');
    item.style.padding = '8px';
    item.style.borderBottom = '1px solid #eee';
    item.textContent = `${location.name} - 距离你约${location.distance.toFixed(2)}千米`;
    container.appendChild(item);
  });
}

4. 对应的HTML结构 #

需要一个容器来展示排序后的结果：

<div id="location-list" style="max-width: 400px; margin: 20px auto;"></div>

一些注意事项： #

• HTTPS环境要求：现在主流浏览器（Chrome、Firefox等）只允许在HTTPS协议下使用Geolocation API，本地开发用localhost是例外。
• 权限处理：一定要处理用户拒绝授权的情况，给用户友好提示，避免页面无响应。
• 距离精度：如果需要计算实际道路距离（而非直线距离），那得借助第三方地图API，但如果只是粗略的直线距离，Haversine公式完全够用。

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