直接在 Vue 计算属性中用 Haversine 公式计算并排序距离：先将经纬度转弧度，代入公式算球面距离（单位 km），再按 distance 升序排列；可封装为工具函数，支持过滤（如 5km 内）。
直接在 Vue 的计算属性里做距离排序，核心是两步：先算每个目标点到用户的直线距离，再按这个距离值升序排列。不依赖后端、不引入地图 SDK 也能实现，关键是用对公式、注意单位和精度。
用 Haversine 公式算真实球面距离
经纬度在球面上，不能简单用平面勾股定理。Haversine 是行业通用方案，误差通常小于 0.5%，足够日常使用。
- 地球半径建议用 6371 km（平均半径），比 6378 或 6357 更平衡极地与赤道偏差
- 所有角度必须转为弧度：
rad = deg * Math.PI / 180 - 公式返回单位是千米，如需米，乘以 1000 后取整即可
把距离计算封装成可复用的函数
放在 utils/calculateDistance.js 里，方便多处调用：
export const calculateDistance = (lat1, lng1, lat2, lng2) => {
const R = 6371
const dLat = ((lat2 - lat1) * Math.PI) / 180
const dLng = ((lng2 - lng1) * 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(dLng / 2) *
Math.sin(dLng / 2)
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
return parseFloat((R * c).toFixed(2)) // 单位：km，保留两位小数
}在 Vue 组件中用计算属性完成排序
假设你有用户当前坐标 myLat、myLng，以及商家列表 shops（每项含 lat、lng）：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
- 在
computed中遍历shops，为每家店添加distance字段 - 用
Array.sort()按distance升序排列（注意：sort 是原地修改，建议先slice()） - 排序后可直接用于 v-for 渲染，距离近的排在前面
const sortedShops = computed(() => {
return shops.value
.map(shop => ({
...shop,
distance: calculateDistance(myLat.value, myLng.value, shop.lat, shop.lng)
}))
.sort((a, b) => a.distance - b.distance)
})加个距离筛选更实用
只显示 5km 内的商家？在计算属性里顺手过滤：
const nearbyShops = computed(() => {
return sortedShops.value.filter(shop => shop.distance <= 5)
})这样模板里用 v-for="shop in nearbyShops" 就自动带距离、已排序、已限距。
