208 lines
5.0 KiB
Plaintext
208 lines
5.0 KiB
Plaintext
================================
|
||
高德地图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. 生产部署：配置真实地图（提升用户体验）
|
||
|
||
================================
|