活动详情页新增「行程路线」地图(高德,批 10)

按时间顺序把执行节点(reality)的起终点坐标连成路线:节点内实线
(showDir 方向箭头)、节点之间虚线衔接;每个节点在出发地(没有出发地
就放到达地)放一个圆形标记 —— 有图片附件显示图片,没有就显示节点
类型 emoji,左上角带序号;点击标记/红点打开对应节点详情。到达地与
出发地不同点时另画红色小圆点。

实现要点:
- 数据层 Attachments::firstImageIdsForNodes():一条 GROUP BY + MIN(id)
  批量取各执行节点首张图片附件,防 N+1;
- 模板只收「有坐标的执行节点」,计划节点与无坐标节点不上图;
  路线数据经 data-route 属性以 JSON 交给内联 JS;
- AMap 2.0(layout.php 已全局加载),加载失败时给一句人话兜底不白屏;
- 地图区块位于时间轴之下、评论区之前。

已验证:本地全链 11 步全绿(渲染检查 330 项);远端 e2e 全绿(新增
10 项地图断言);部署静态断言与双 PHP 真实渲染通过后提交。
This commit is contained in:
2026-09-24 11:12:27 +08:00
parent 0e30495f14
commit 69279db1b2
4 changed files with 189 additions and 0 deletions
+41
View File
@@ -1242,3 +1242,44 @@ video.video-thumb.video-thumb-mini {
}
.lightbox-file-hint { margin: 0; font-size: 13px; color: var(--text-mute); }
.lightbox-file-dl { display: inline-block; }
/* ── 20. 活动页路线地图(批 10)──────────────────────────────────────────── */
.route-map-section { margin-top: 28px; }
.route-map {
height: 380px;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-soft);
}
.route-map-hint { margin-top: 8px; font-size: 12.5px; }
.route-map-fallback { padding: 24px; text-align: center; color: var(--text-mute); }
/* 节点圆形标记:有图片附件放图片,没有放类型 emoji;左上角序号 */
.route-marker {
position: relative; width: 40px; height: 40px; border-radius: 50%;
border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
background: var(--surface); cursor: pointer; overflow: visible;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
}
.route-marker img {
width: 100%; height: 100%; border-radius: 50%;
object-fit: cover; display: block;
}
.route-marker-emoji { line-height: 1; }
.route-marker-num {
position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
border-radius: 999px; background: #ef4444; color: #fff;
font-size: 11px; font-weight: 700; line-height: 17px;
text-align: center; padding: 0 3px;
}
/* 到达地小圆点 */
.route-end-dot {
width: 12px; height: 12px; border-radius: 50%;
background: #ef4444; border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.route-legend-end { color: #ef4444; font-weight: 700; }
@media (max-width: 640px) {
.route-map { height: 300px; }
}