从地图接入到业务联动：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 API）Key。JS API 2.0 的新 Key 还需要配合安全密钥使用。

项目只在后端环境中配置真实值：

AMAP_KEY=你的Web端Key AMAP_SECURITY_JSCODE=你的安全密钥 AMAP_MAP_STYLE=amap://styles/darkblue AMAP_COORDINATE_SYSTEM=WGS84

浏览器加载地图脚本需要使用 Key，因此 Key 会出现在前端请求中；安全密钥不能写进前端代码。高德官方推荐通过服务端代理转发安全密钥，并要求在加载 JS API 脚本之前设置serviceHost。高德安全密钥文档

我设置了/_AMapService代理。前端先通过受权限控制的/api/maps/config获取地图配置，后端同时签发限定路径、带有效期的 HttpOnly Cookie。随后 SDK 请求代理时，后端验证凭据，只转发地图实际需要的固定路径，并由服务器写入 Key 和安全密钥。

这一步解决的不只是“地图能加载”：代理不能成为任意 URL 的转发器，错误日志也不能把带密钥的完整请求地址打印出来。

三、先用档案坐标；没有坐标再查名称

停车场定位分两条路径：

1. 有有效经纬度：优先采用停车场档案坐标。
2. 缺少经纬度：通过AMap.PlaceSearch按名称查询，结合地址判断结果。

高德的地点搜索支持城市、分类、分页等参数。PlaceSearch 参考手册 本项目将搜索类别设为“停车场”，并根据档案信息选择搜索城市。

名称搜索不能简单地“取第一条”。例如“深圳湾口岸停车场”可能返回社会停车场、出入口以及附近其他停车场。因此我的处理规则是：

• 名称唯一且地址能对应时，自动定位；
• 出现多个候选、地址冲突或结果尚未查全时，展示名称和地址，让页面使用者确认；
• 查不到时显示“尚未定位”，不生成一个看似正确的假点位。

另外还要处理坐标系。现有档案按 WGS84 解释时，先通过高德的坐标转换能力转为地图使用的坐标；如果档案本来就统一使用 GCJ-02，则直接展示。不能只改停车场名称，却保留另一个地点的旧经纬度，因为有效档案坐标的优先级高于名称搜索。

四、五个图标同屏，靠的是视野计算

初版地图固定聚焦深圳湾口岸。这个设置适合展示口岸，但停车场分散在周边时，有些图标会落在画面外。最终改成：有点位后，根据全部已定位停车场计算地图中心和缩放级别，并为右侧名称牌预留空间。

实现时先把经纬度投影为地图平面坐标，求出所有点的边界，再结合容器宽高确定缩放级别。窗口尺寸变化后重新计算。这样点击其中一个停车场时，全页业务数据可以切换，地图上的其他停车场仍留在画面里。

点位本身使用页面上的自定义元素，通过高德地图的lngLatToContainer计算屏幕位置。地图移动、缩放时重新计算位置。P 图标、右侧名称牌和底部呼吸光圈由 CSS 绘制；颜色则来自业务空位状态，例如空位充足、车位紧张、已满。

这个设计让我可以保留大屏原有的视觉语言，同时使用真实底图和真实地点坐标。

五、地图点击如何带动整个大屏

地图组件点击停车场时只抛出车场id。大屏页面将其写入selectedParkId，数据层随后请求：

GET /api/overview/metrics?parkId=当前停车场ID

顶部指标、资源概览等内容据此切换。数据层还会检查后端返回的scope.parkId是否与请求一致，避免把企业级汇总误显示成单个停车场数据。地图保持五点同屏，与“当前业务统计范围切换”并不冲突。

六、这次遇到的几个实际问题

地图加载成功，不代表地点匹配成功。底图和地点搜索是不同环节，因此页面分别显示地图错误、查询失败、待确认和未定位状态。

异地车场不能硬塞到口岸附近。如果档案属于香港或其他城市，真实坐标就应在真实位置。它若与深圳湾口岸车场一起参与“全部同屏”，地图范围自然会扩大。想做口岸片区展示，应先核对参与展示的业务车场及其档案地址。

第一页只有一个同名结果，也未必是唯一结果。地点搜索有分页；没有确认结果已查全时，不能仅凭第一页自动认定位置。

页面确认不等于档案已更新。当前候选地点的人工选择只对当前页面有效。正式业务要稳定展示，还应维护准确的停车场名称、地址和坐标。

验证结果与下一步

这次完成了前后端构建及相关测试，并在不连接业务数据库的独立页面中，使用高德返回的五个真实地点验证了五个 P 图标同屏、名称牌及呼吸效果。独立页面中的车位数量是测试数据。

正式大屏能否显示相同数量，仍取决于业务接口返回的停车场档案。验收时可以先看地图底部的“已定位 X / 总数”，再逐条核对未定位车场的名称、地址和经纬度。