JavaScript下拉选距离筛选附近地点的功能故障排查求助

1. 下拉菜单变更时重新触发筛选 #

当前代码仅在首次获取地理位置时执行一次距离筛选，下拉菜单切换后不会重新计算。需要给下拉菜单添加事件监听，每次选择新距离时重新执行筛选逻辑：

// 页面加载完成后绑定下拉菜单事件
document.addEventListener('DOMContentLoaded', function() {
  const distanceSelect = document.getElementById('distance');
  distanceSelect.addEventListener('change', function() {
    if (window.userPosition) {
      filterLocationsByDistance(window.userPosition);
    }
  });
});

// 将筛选逻辑抽为独立函数
function filterLocationsByDistance(position) {
  const select = document.getElementById("distance");
  const maxDistance = parseFloat(select.value); // 转成数字避免字符串比较错误

  const latitudes = [45.830527, 45.879442, 46.017065, 46.045482];
  const longitudes = [9.029344, 8.979577, 8.931969, 8.978964];
  
  for (let i = 0; i < latitudes.length; i++) {
    const latLocation = latitudes[i];
    const lonLocation = longitudes[i];
    const latUser = position.coords.latitude;
    const lonUser = position.coords.longitude;
    
    // 计算距离（保留原有逻辑）
    const R = 6371;
    const dLat = deg2rad(latLocation - latUser);
    const dLon = deg2rad(lonLocation - lonUser);
    const a = Math.sin(dLat / 2)**2 + Math.cos(deg2rad(latUser)) * Math.cos(deg2rad(latLocation)) * Math.sin(dLon / 2)**2;
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    const distance = R * c;

    const locationEl = document.getElementById(i);
    locationEl.setAttribute("data-index", distance);
    
    // 数字比较，展示/隐藏符合条件的地点
    locationEl.style.display = distance <= maxDistance ? "block" : "none";
  }
}

// 修改初始定位函数，保存位置并调用筛选
function mia_posizione(position) {
  window.userPosition = position;
  filterLocationsByDistance(position);
}

2. 修复字符串比较逻辑错误 #

dataset.index和下拉菜单value默认是字符串类型，直接比较会按字典序（比如"10" < "2"），导致筛选结果完全错误。上面的代码已经通过parseFloat将值转为数字，用数值大小进行比较。

3. 修复HTML重复ID问题 #

HTML中<li id=1>内部还有<div id=1>，ID必须唯一，否则getElementById会返回第一个匹配元素，导致操作错误。修改内部ID为唯一名称：

<li class="index" data-index="1" id=1>
  <div id="location-div-1"> </div>
  <!-- 其他内容不变 -->
</li>
<li class="index" data-index="3" id=2>
  <h3 id="location-h3-2"> </h3>
  <!-- 其他内容不变 -->
</li>

同时，<ul>内直接放<br>不符合规范，改用CSS控制列表项间距：

#list .index {
  margin-bottom: 1.5rem;
}

然后删除HTML中所有<br>标签。

4. 点击Find按钮时重新筛选并排序 #

当前SortData仅排序不筛选，修改后先执行筛选再排序：

function SortData() {
  // 先重新应用筛选
  if (window.userPosition) {
    filterLocationsByDistance(window.userPosition);
  }
  // 排序时用数字比较
  const indexes = document.querySelectorAll("[data-index]");
  const indexesArray = Array.from(indexes);
  const sorted = indexesArray.sort((a, b) => {
    const distA = parseFloat(a.dataset.index);
    const distB = parseFloat(b.dataset.index);
    return distA - distB;
  });
  sorted.forEach(el => document.querySelector("#list").appendChild(el));
}

5. 修复aprox函数的区间判断错误 #

0.1 < x < 1在JS中是无效写法，会先判断0.1 < x得到布尔值，再和1比较，永远为true。修改为：

function aprox(x) {
  if (x > 0.1 && x < 1) { // 正确的区间判断
    const k = x * 10;
    const m = Math.ceil(k);
    const t = m * 100;
    return t + " m";
  } else {
    return Math.ceil(x) + " km";
  }
}

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