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

## 需求

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

## JSON 输入格式

```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    # 完整的网页实现
```

## 关键代码

### 地理编码
```javascript
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 距离计算
```javascript
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;
}
```

### 获取距离
```javascript
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 导出
```javascript
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 验证下载