test-map-distance/plan/v0.0.2.md

地图距离计算网页版 (v0.0.2)

需求

创建一个纯网页版的距离计算工具：

• AMAP_KEY 可编辑并保存到浏览器 localStorage
• 上传 JSON 数据文件计算多组距离
• 调用高德地图 API 计算距离
• 表格展示结果：来源地址 | 目的地地址 | 距离(km)
• 导出 CSV 功能

JSON 输入格式

[
  {"from": "北京市", "to": "上海市"},
  {"from": "广州市", "to": "深圳市"}
]

实现方案

1. Key 管理：使用 localStorage 保存/读取 AMAP_KEY
2. 文件上传：<input type="file" accept=".json"> + FileReader 解析
3. 高德 API：使用 Geocode 地理编码 API
   • URL: https://restapi.amap.com/v3/geocode/geo?address={address}&key={key}
   • 将地址转换为经纬度坐标
4. 距离计算：使用 Haversine 公式计算两点间直线距离
   • 地球半径: 6371000 米
   • 转换为公里，保留2位小数
5. CSV 导出：原生 JS 生成 Blob 下载

依赖

• 无外部 JS 库，纯原生 HTML/CSS/JavaScript 实现

文件结构

public/
  web.html    # 完整的网页实现

关键代码

地理编码

async function geocode(address, key) {
  const url = `https://restapi.amap.com/v3/geocode/geo?address=${encodeURIComponent(address)}&key=${key}`;
  const res = await fetch(url).then(r => r.json());
  if (res.status === '1' && res.geocodes?.length > 0) {
    const [lng, lat] = res.geocodes[0].location.split(',').map(Number);
    return { lng, lat };
  }
  return null;
}

Haversine 距离计算

function calculateDistance(from, to) {
  const R = 6371000; // 地球半径（米）
  const dLat = (to.lat - from.lat) * Math.PI / 180;
  const dLng = (to.lng - from.lng) * Math.PI / 180;
  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(from.lat * Math.PI / 180) *
    Math.cos(to.lat * Math.PI / 180) *
    Math.sin(dLng / 2) ** 2;
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return R * c;
}

获取距离

async function getDistance(fromAddress, toAddress, key) {
  const [from, to] = await Promise.all([
    geocode(fromAddress, key),
    geocode(toAddress, key)
  ]);
  if (!from || !to) return '解析失败';
  const distance = calculateDistance(from, to);
  return (distance / 1000).toFixed(2) + ' km';
}

CSV 导出

function exportCSV(results) {
  const csv = 'from,to,distance\n' + results.map(r => `${r.from},${r.to},${r.distance}`).join('\n');
  const blob = new Blob([csv], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'distance_results.csv';
  a.click();
}

验证步骤

1. 浏览器打开 public/web.html
2. 输入 AMAP_KEY 并保存
3. 上传测试 JSON 文件
4. 查看计算结果表格
5. 点击导出 CSV 验证下载