uni-fans-score/project_document/distance_calculation_optimization.md

距离计算优化文档

问题描述

原代码中距离计算存在单位问题：

• calculateDistanceSync 函数返回的是米为单位的距离
• 但代码中直接使用 distance.toFixed(1) 并显示为 "km"
• 导致距离显示不准确

解决方案

1. 距离格式化函数

添加了智能距离格式化函数 formatDistance：

const formatDistance = (distanceInMeters) => {
  if (distanceInMeters < 1000) {
    return `${Math.round(distanceInMeters)}m`
  } else {
    return `${(distanceInMeters / 1000).toFixed(1)}km`
  }
}

2. 距离数据结构优化

• item.distance: 格式化的距离字符串（如 "1.5km" 或 "800m"）
• item.distanceInMeters: 原始米数，用于排序和过滤

3. 排序和过滤逻辑优化

• 排序使用 distanceInMeters 进行数值比较
• 过滤使用米数进行距离判断（10km = 10000米）

4. 模板显示优化

• 直接显示 item.distance，因为已经包含单位
• 移除了模板中的 "km" 后缀

测试验证

添加了测试函数 testDistanceCalculation() 用于验证距离计算准确性：

• 测试用例：北京天安门到故宫（约1.5公里）
• 开发环境自动运行测试

优化效果

1. 距离显示更准确：小于1公里显示为米，大于等于1公里显示为千米
2. 排序更准确：使用数值比较而非字符串比较
3. 过滤更精确：使用米数进行距离判断
4. 用户体验更好：距离显示更直观

文件修改清单

• utils/mapUtils.js: 添加注释说明单位，添加测试函数
• pages/index/index.vue: 优化距离计算逻辑，添加格式化函数
• project_document/distance_calculation_optimization.md: 本文档