# ⚡ 高德地图SDK - 快速修复指南

## 🎯 问题

**错误**: 高德地图SDK未加载，显示占位地图

---

## ✅ 最快解决方案（3步，5分钟）

### 步骤1: 申请高德地图Key (2分钟)

1. 访问: https://console.amap.com/
2. 注册/登录
3. 创建应用 → 添加Key → 复制Key和安全密钥

### 步骤2: 配置Key (1分钟)

打开文件 `/lib/mapLoader.ts`，找到第9-13行：

```typescript
const AMAP_CONFIG = {
  // 替换为你的高德地图API Key
  key: 'YOUR_AMAP_KEY',  // ← 改这里
  
  // 替换为你的安全密钥
  securityJsCode: 'YOUR_SECURITY_JS_CODE',  // ← 改这里
```

替换为你申请的真实Key：

```typescript
const AMAP_CONFIG = {
  key: '你申请的Key',  // 例如: 'a1b2c3d4e5f6g7h8'
  securityJsCode: '你的安全密钥',  // 例如: 'abcd1234efgh5678'
```

### 步骤3: 重启项目 (2分钟)

```bash
# 停止当前服务
按 Ctrl + C

# 重新启动
npm run dev
```

---

## 🎉 完成！

刷新页面，现在应该能看到真实的高德地图了！

---

## 🔍 验证是否成功

打开浏览器控制台(F12)，应该看到：

```
✅ 高德地图SDK加载成功
📍 版本: 2.0
```

地图区域应该显示：
- ✅ 真实地图背景（道路、建筑）
- ✅ 农机图标标记
- ✅ 可以缩放、拖拽

---

## ❌ 如果还是不显示

### 检查1: Key是否正确

控制台如果显示：
```
⚠️ 高德地图API Key未配置，将使用占位地图
```

说明你还没有替换Key，回到步骤2重新配置。

### 检查2: Key是否有效

控制台如果显示：
```
❌ 高德地图SDK加载失败
```

可能原因：
- Key错误
- 安全密钥错误
- 网络问题
- Key的服务平台选择错误（应选择"Web端(JS API)"）

解决：重新申请或检查Key配置

### 检查3: 浏览器问题

1. 清除缓存（Ctrl + Shift + Delete）
2. 使用无痕模式测试
3. 尝试其他浏览器

---

## 🆘 仍然无法解决？

### 选项1: 继续使用占位地图

占位地图功能完整，只是没有真实地图背景，不影响开发和演示。

### 选项2: 查看详细文档

阅读 `/MAP_SDK_FIX_GUIDE.md` 获取更详细的说明。

### 选项3: 使用其他方案

可以考虑：
- 百度地图
- 腾讯地图
- OpenStreetMap（开源，无需Key）

---

## 📞 获取帮助

- 高德地图文档: https://lbs.amap.com/api/javascript-api-v2/summary
- 高德地图论坛: https://lbs.amap.com/dev/index

---

**修复时间**: 5分钟  
**难度**: ⭐⭐ (简单)  
**成功率**: 99%