================================
高德地图SDK配置 - 快速指南
================================

当前状态：
✅ 系统已从Leaflet切换到高德地图SDK
✅ 正在使用占位地图模式（功能完整）
💡 如需真实地图，请按以下步骤配置

================================
方案一：继续使用占位地图（推荐）
================================

占位地图优势：
✅ 无需申请Key，开箱即用
✅ 所有功能完整可用（绘图、编辑、查询等）
✅ 无使用限额，开发测试方便
✅ 不依赖外部服务，稳定可靠

唯一区别：
❌ 不显示真实的地理底图
❌ 不显示卫星影像
❌ 无地名搜索功能

使用建议：
• 开发阶段：使用占位地图
• 测试阶段：使用占位地图
• 生产环境：根据需要配置真实地图

================================
方案二：启用真实地图
================================

【第一步】申请高德地图Key
----------------------------
1. 访问：https://console.amap.com/
2. 注册并登录账号
3. 创建应用
4. 添加Web端（JS API）Key
5. 复制生成的Key

【第二步】配置Key
----------------------------
1. 打开文件：/lib/mapLoader.ts

2. 找到这段代码：
   const AMAP_CONFIG = {
     key: 'YOUR_AMAP_KEY',  // ← 这里
     securityJsCode: '',
     version: '2.0',
     plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geocoder'],
   };

3. 替换为你的Key：
   const AMAP_CONFIG = {
     key: 'a1b2c3d4e5f6g7h8i9j0',  // ← 粘贴你的Key
     securityJsCode: '',
     version: '2.0',
     plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geocoder'],
   };

4. 保存文件

【第三步】刷新页面
----------------------------
Windows/Linux:
• 按 Ctrl + F5

Mac:
• 按 Cmd + Shift + R

【第四步】验证
----------------------------
打开浏览器控制台（F12），应该看到：

✅ 成功：
   🔄 正在加载高德地图SDK...
   ✅ 高德地图SDK加载成功
   📍 版本: 2.0

❌ 占位模式：
   💡 使用占位地图模式（功能完整）
   💡 如需真实地图，请在 /lib/mapLoader.ts 中配置高德地图Key

================================
验证方法
================================

方法一：查看控制台日志
------------------------
F12 → Console 标签
查看是否有"高德地图SDK加载成功"

方法二：查看地图显示
------------------------
占位地图：
• 网格背景
• "占位地图"水印
• 灰色底图

真实地图：
• 真实街道底图
• 高德地图Logo
• 彩色地图

方法三：执行代码检查
------------------------
在控制台执行：
console.log(window.AMap);

有输出 = 真实地图
null/undefined = 占位地图

================================
常见问题
================================

Q: 配置Key后还是显示占位地图？
A: 请检查：
   1. Key是否正确粘贴（无多余空格）
   2. 是否已清除缓存（Ctrl+F5）
   3. 控制台是否有错误信息
   4. Key在高德控制台的状态

Q: 占位地图影响功能吗？
A: 不影响！
   • 地块绘制 ✅
   • 地块编辑 ✅
   • 坐标拾取 ✅
   • 面积计算 ✅
   • 数据存储 ✅

Q: 开发时必须用真实地图吗？
A: 不需要！
   开发建议用占位地图
   生产部署再配置真实地图

Q: 如何切换回占位地图？
A: 将Key改回：
   key: 'YOUR_AMAP_KEY'
   或
   key: ''

Q: Key有使用限制吗？
A: 有，高德地图免费配额：
   • 每天有调用次数限制
   • 超出需要付费
   • 占位地图无限制

================================
推荐配置
================================

开发环境（推荐）：
const AMAP_CONFIG = {
  key: 'YOUR_AMAP_KEY',  // 使用占位地图
  securityJsCode: '',
  version: '2.0',
  plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geocoder'],
};

生产环境：
const AMAP_CONFIG = {
  key: 'your-real-key',        // 真实Key
  securityJsCode: 'your-sec',  // 安全密钥（推荐）
  version: '2.0',
  plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geocoder'],
};

================================
文件位置
================================

需要修改的文件：
/lib/mapLoader.ts    ← 在这里配置Key

相关文件：
/App.tsx             ← 已更新（无需修改）
/lib/leafletLoader.ts ← 已弃用（无需理会）

================================
技术支持
================================

高德地图官方：
• 文档: https://lbs.amap.com/api/javascript-api/summary
• 控制台: https://console.amap.com/
• 论坛: https://lbs.amap.com/dev/

详细文档：
/AMAP_SDK_CONFIGURATION_GUIDE.md

================================
总结
================================

✅ 系统已切换到高德地图SDK
✅ 当前使用占位地图模式
✅ 所有功能正常可用
💡 如需真实地图，在 /lib/mapLoader.ts 配置Key

推荐做法：
1. 开发阶段：使用占位地图（当前状态）
2. 测试阶段：可选配置真实地图测试
3. 生产部署：配置真实地图（提升用户体验）

================================