cavin/smart-crop-ui

Fork 0

Files

peng b907cc4299 生产管理系统前端 - 瓦力0.71原型图更新

2025-10-28 15:26:08 +08:00

4.8 KiB

Raw Blame History

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

当前状态

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

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

3分钟快速启用真实地图

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

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

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

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

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

无需任何配置！

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

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

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

第二步：配置（1分钟）

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

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

替换为：

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

第三步：刷新页面

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

如何验证地图已启用

占位地图（当前）

✋ 显示渐变绿色/蓝色背景
✋ 中央有"地图演示模式"提示框
✋ 只有网格线

真实地图（启用后）

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

功能对比

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

常见问题

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

A: 系统检测到：

没有配置高德地图 API Key（仍是占位符 YOUR_AMAP_KEY）
或 Leaflet 还在从 CDN 加载中

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

Q: 占位地图能用吗？

A: 能用！所有功能都正常：

✅ 添加标记点
✅ 绘制多边形（地块、围栏）
✅ 测量距离
✅ 保存坐标数据

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

Q: 推荐使用哪个？

A: 根据场景：

开发/测试: 占位地图（已启用）

最快速，零配置
适合功能开发

演示/小规模使用: Leaflet（自动）

免费，无需注册
全球地图覆盖

生产环境（中国）: 高德地图

中国地图最详细
每日30万次免费配额
需注册（5分钟）

Q: Leaflet 为什么没加载？

A: 可能原因：

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

解决方案:

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

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

A: 检查清单：

API Key 已正确粘贴（无多余空格）
安全密钥已配置
保存了文件
刷新了浏览器（Ctrl+Shift+R 强制刷新）
控制台无错误

快速测试

测试 Leaflet 是否工作

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

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

测试高德地图是否工作

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

需要帮助？

查看详细文档

📖 /MAP_CONFIGURATION_GUIDE.md - 完整配置指南

检查地图状态

打开任意包含地图的页面（如：地块管理 → GIS地图），浏览器控制台会显示：

✅ Leaflet地图初始化成功 - Leaflet 已加载
✅ 高德地图初始化成功 - 高德地图已加载
✅ 占位地图初始化成功（功能完整） - 使用演示模式

最简单的方式

什么都不改，直接使用！

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

最后

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

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

4.8 KiB Raw Blame History Unescape Escape