smart-crop-ui/src/MAP_SDK_QUICK_FIX.md

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

🎯 问题

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

---

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

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

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

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

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

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

替换为你申请的真实Key：

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

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

# 停止当前服务
按 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%