135 lines
2.5 KiB
Markdown
135 lines
2.5 KiB
Markdown
# ⚡ 高德地图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%
|