从地图接入到业务联动Vue 3 JAVA 打造停车场同屏的智慧停车运营大屏最初做停车运营大屏时中间的“地图”只是视觉背景。它能让页面看起来像驾驶舱却回答不了运营人员最关心的问题停车场到底在哪里、还有多少空位、点击某个车场后全页数据能否跟着切换这次我用高德地图 JS API 2.0 替换了静态地图并把停车场档案、地点匹配和运营指标串成一条完整链路停车场档案与运营数据 ↓ 后端概览接口 ↓ 坐标转换或按名称查询地点 ↓ 高德底图 自定义 P 点位 ↓ 点击点位 → 按 parkId 切换全页指标最终的独立验证页面可以同时展示停车场的 P 图标、名称牌和呼吸光圈。下面按接入顺序讲清楚实现过程。一、先分清地图数据和业务数据高德负责提供底图、地点搜索和坐标能力停车场名称、总车位、空位、收入、车流等仍来自我们的业务系统。后端概览接口返回的停车场数据大致如下interfaceOverviewPark{id:stringname:stringaddress?:stringlng?:numberlat?:numbertotal:numberfree:numberfault:numberchargingSpaces:numberstatus:string}这里最重要的关联字段是id。地图点位对应一个业务停车场而不是把高德搜索结果直接当成运营数据。点击 P 图标后前端记录selectedParkId重新请求带parkId的概览数据后端也会校验车场是否属于当前企业。这保证了地图选择、指标卡片和业务统计使用同一个范围。二、申请 Web 端 Key把安全密钥留在后端完整流程是注册账号 → 创建应用 → 申请 Key → 显示地图 → 标注停车场 → 美化和联动。在高德开放平台创建应用并添加Web 端JS APIKey。JS API 2.0 的新 Key 还需要配合安全密钥使用。项目只在后端环境中配置真实值AMAP_KEY你的Web端Key AMAP_SECURITY_JSCODE你的安全密钥 AMAP_MAP_STYLEamap://styles/darkblue AMAP_COORDINATE_SYSTEMWGS84浏览器加载地图脚本需要使用 Key因此 Key 会出现在前端请求中安全密钥不能写进前端代码。高德官方推荐通过服务端代理转发安全密钥并要求在加载 JS API 脚本之前设置serviceHost。高德安全密钥文档我设置了/_AMapService代理。前端先通过受权限控制的/api/maps/config获取地图配置后端同时签发限定路径、带有效期的 HttpOnly Cookie。随后 SDK 请求代理时后端验证凭据只转发地图实际需要的固定路径并由服务器写入 Key 和安全密钥。这一步解决的不只是“地图能加载”代理不能成为任意 URL 的转发器错误日志也不能把带密钥的完整请求地址打印出来。三、先用档案坐标没有坐标再查名称停车场定位分两条路径有有效经纬度优先采用停车场档案坐标。缺少经纬度通过AMap.PlaceSearch按名称查询结合地址判断结果。高德的地点搜索支持城市、分类、分页等参数。PlaceSearch 参考手册 本项目将搜索类别设为“停车场”并根据档案信息选择搜索城市。名称搜索不能简单地“取第一条”。例如“深圳湾口岸停车场”可能返回社会停车场、出入口以及附近其他停车场。因此我的处理规则是名称唯一且地址能对应时自动定位出现多个候选、地址冲突或结果尚未查全时展示名称和地址让页面使用者确认查不到时显示“尚未定位”不生成一个看似正确的假点位。另外还要处理坐标系。现有档案按 WGS84 解释时先通过高德的坐标转换能力转为地图使用的坐标如果档案本来就统一使用 GCJ-02则直接展示。不能只改停车场名称却保留另一个地点的旧经纬度因为有效档案坐标的优先级高于名称搜索。四、五个图标同屏靠的是视野计算初版地图固定聚焦深圳湾口岸。这个设置适合展示口岸但停车场分散在周边时有些图标会落在画面外。最终改成有点位后根据全部已定位停车场计算地图中心和缩放级别并为右侧名称牌预留空间。实现时先把经纬度投影为地图平面坐标求出所有点的边界再结合容器宽高确定缩放级别。窗口尺寸变化后重新计算。这样点击其中一个停车场时全页业务数据可以切换地图上的其他停车场仍留在画面里。点位本身使用页面上的自定义元素通过高德地图的lngLatToContainer计算屏幕位置。地图移动、缩放时重新计算位置。P 图标、右侧名称牌和底部呼吸光圈由 CSS 绘制颜色则来自业务空位状态例如空位充足、车位紧张、已满。这个设计让我可以保留大屏原有的视觉语言同时使用真实底图和真实地点坐标。五、地图点击如何带动整个大屏地图组件点击停车场时只抛出车场id。大屏页面将其写入selectedParkId数据层随后请求GET /api/overview/metrics?parkId当前停车场ID顶部指标、资源概览等内容据此切换。数据层还会检查后端返回的scope.parkId是否与请求一致避免把企业级汇总误显示成单个停车场数据。地图保持五点同屏与“当前业务统计范围切换”并不冲突。六、这次遇到的几个实际问题地图加载成功不代表地点匹配成功。底图和地点搜索是不同环节因此页面分别显示地图错误、查询失败、待确认和未定位状态。异地车场不能硬塞到口岸附近。如果档案属于香港或其他城市真实坐标就应在真实位置。它若与深圳湾口岸车场一起参与“全部同屏”地图范围自然会扩大。想做口岸片区展示应先核对参与展示的业务车场及其档案地址。第一页只有一个同名结果也未必是唯一结果。地点搜索有分页没有确认结果已查全时不能仅凭第一页自动认定位置。页面确认不等于档案已更新。当前候选地点的人工选择只对当前页面有效。正式业务要稳定展示还应维护准确的停车场名称、地址和坐标。验证结果与下一步这次完成了前后端构建及相关测试并在不连接业务数据库的独立页面中使用高德返回的五个真实地点验证了五个 P 图标同屏、名称牌及呼吸效果。独立页面中的车位数量是测试数据。正式大屏能否显示相同数量仍取决于业务接口返回的停车场档案。验收时可以先看地图底部的“已定位 X / 总数”再逐条核对未定位车场的名称、地址和经纬度。