# 🗺️ 启用真实地图 - 快速指南

## 当前状态

✅ **系统正常运行** - 使用占位地图模式（演示模式）

❌ **这不是错误！** 所有地图功能都正常可用，只是显示的是演示地图而非真实卫星影像。

## 3分钟快速启用真实地图

### 方案 A: Leaflet（推荐 - 免费且无需注册）

Leaflet 使用 OpenStreetMap 免费地图数据，提供全球地图覆盖。

**已自动配置！** 系统默认使用 Leaflet，会自动从 CDN 加载。

**如果 Leaflet 未加载，可能是网络问题。解决方案：**

1. 检查网络连接
2. 确保可以访问 `unpkg.com`
3. 等待几秒让 CDN 加载完成
4. 刷新页面

**无需任何配置！**

---

### 方案 B: 高德地图（中国地图更详细）

**第一步：获取 API Key（5分钟）**

1. 访问: https://console.amap.com/
2. 注册/登录账号
3. 创建应用 → 添加 Key (选择 "Web端 JS API")
4. 复制你的 **Key** 和 **安全密钥**

**第二步：配置（1分钟）**

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

```typescript
const AMAP_CONFIG = {
  key: 'YOUR_AMAP_KEY',           // ← 粘贴你的 Key
  securityJsCode: 'YOUR_SECURITY_JS_CODE',  // ← 粘贴安全密钥
  version: '2.0',
```

替换为：

```typescript
const AMAP_CONFIG = {
  key: '你复制的API_Key',
  securityJsCode: '你复制的安全密钥',
  version: '2.0',
```

**第三步：刷新页面**

保存文件后刷新浏览器，地图将自动加载！

---

## 如何验证地图已启用

### 占位地图（当前）
- ✋ 显示渐变绿色/蓝色背景
- ✋ 中央有"地图演示模式"提示框
- ✋ 只有网格线

### 真实地图（启用后）
- ✅ 显示实际的卫星影像或街道地图
- ✅ 可以看到建筑、道路、地形
- ✅ 可以拖动、缩放查看不同区域

## 功能对比

| 功能 | 占位地图<br/>(当前) | Leaflet<br/>(推荐) | 高德地图 |
|------|:---:|:---:|:---:|
| **标记点** | ✅ | ✅ | ✅ |
| **绘制地块** | ✅ | ✅ | ✅ |
| **测距** | ✅ | ✅ | ✅ |
| **真实影像** | ❌ | ✅ | ✅ |
| **中国优化** | ❌ | ⚠️ | ✅ |
| **需注册** | ❌ | ❌ | ✅ |
| **费用** | 免费 | 免费 | 免费额度 |

## 常见问题

### Q: 为什么会显示占位地图？

**A:** 系统检测到：
- 没有配置高德地图 API Key（仍是占位符 `YOUR_AMAP_KEY`）
- 或 Leaflet 还在从 CDN 加载中

这是正常的保护机制，确保即使没有地图 API 也能正常使用系统。

---

### Q: 占位地图能用吗？

**A:** 能用！所有功能都正常：
- ✅ 添加标记点
- ✅ 绘制多边形（地块、围栏）
- ✅ 测量距离
- ✅ 保存坐标数据

只是看不到真实的卫星影像和街道，但不影响业务功能。

---

### Q: 推荐使用哪个？

**A:** 根据场景：

**开发/测试**: 占位地图（已启用）
- 最快速，零配置
- 适合功能开发

**演示/小规模使用**: Leaflet（自动）
- 免费，无需注册
- 全球地图覆盖

**生产环境（中国）**: 高德地图
- 中国地图最详细
- 每日30万次免费配额
- 需注册（5分钟）

---

### Q: Leaflet 为什么没加载？

**A:** 可能原因：
1. **网络慢**: CDN 还在加载，等待10-20秒
2. **CDN 被屏蔽**: 公司网络可能限制了 unpkg.com
3. **浏览器缓存**: 清除缓存重试

**解决方案**:
- 刷新页面
- 检查浏览器控制台是否有错误
- 或使用高德地图（国内服务，更稳定）

---

### Q: 高德地图配置了还是占位地图？

**A:** 检查清单：
- [ ] API Key 已正确粘贴（无多余空格）
- [ ] 安全密钥已配置
- [ ] 保存了文件
- [ ] **刷新了浏览器**（Ctrl+Shift+R 强制刷新）
- [ ] 控制台无错误

---

## 快速测试

### 测试 Leaflet 是否工作

打开浏览器控制台（F12），运行：

```javascript
console.log('Leaflet:', window.L ? '✅ 已加载' : '❌ 未加载');
```

### 测试高德地图是否工作

```javascript
console.log('高德地图:', window.AMap ? '✅ 已加载' : '❌ 未加载');
```

---

## 需要帮助？

### 查看详细文档
📖 `/MAP_CONFIGURATION_GUIDE.md` - 完整配置指南

### 检查地图状态
打开任意包含地图的页面（如：地块管理 → GIS地图），浏览器控制台会显示：
- `✅ Leaflet地图初始化成功` - Leaflet 已加载
- `✅ 高德地图初始化成功` - 高德地图已加载
- `✅ 占位地图初始化成功（功能完整）` - 使用演示模式

### 最简单的方式

**什么都不改，直接使用！**

占位地图模式已经足够应对大部分开发和演示需求。真实地图只是让界面更漂亮，功能上没有区别。

---

## 最后

**记住**: 显示占位地图 ≠ 系统有问题 ✅

这是一个特意设计的功能，让系统在任何环境下都能正常工作！