路线地图体验修正 + 节点表单裁剪改按钮触发（批 11）

地图四项调整（用户反馈）：
- 位置移到封面之下、时间轴之前 —— 行程一长不用拉到底才看到地图；
- 圆形标记放在该段行程线的中点（起终点都有才取中点，缺一头放
  有的一头），不再是起点位置；anchor 改 center 居中骑在线上；
- 只有地名、没坐标的地点（偏僻地方下拉选不到点位）：浏览器端调
  AMap.Geocoder 按地名查坐标，查到补进路线全量重画（drawRoute 幂等），
  查不到保持缺省不硬造位置；data-route 新增 sname/ename 地名；
- 提示文案同步更新。

裁剪交互（用户反馈）：
- 选图后不再自动弹出裁剪框；每张能裁的缩略图旁放「✂ 裁剪」按钮
  （左上角，与右上角 × 对称），点了才弹框，只处理这一张；
- 「逐张裁剪」批量入口保留：确定后仍自动弹下一张（cropChain 标志
  区分两种流程）；删除 addedCroppable 自动触发逻辑。

已验证：本地全链 11 步全绿（渲染检查 339 项、真实浏览器交互更新为
按钮触发流程 75 项）；远端 e2e 340 项 0 失败（新增 9 项断言）；
部署静态断言/双 PHP 渲染/内容断言全过后提交。

templates/activities/show.php

@@ -30,6 +30,165 @@
     </div>
 <?php endif; ?>
 
+<?php
+/* ── 路线地图（批 10 引入，批 11 调整位置与标记逻辑）──────────────
+   位置放在封面之下、时间轴之前：行程一长，拉到底才看到地图的体验很差。
+   按时间顺序把执行节点的起终点连成路线：节点内实线、节点之间虚线；
+   圆形标记放在**这段行程线的中点**（缺一头就放有的一头）——
+   有图片附件显示图片，没有显示节点类型 emoji，左上角带序号，
+   点一下打开该节点详情。
+   只有地名、没坐标的地点（偏僻地方下拉选不到点位）：浏览器端调
+   高德地理编码（AMap.Geocoder）按地名查坐标，查到就补进路线重画；
+   查不到就保持缺省，不硬造位置。AMap 2.0 已由 layout.php 全局加载。 */
+$routeNodes = [];
+$nodeFirstImage = $nodeFirstImage ?? [];
+foreach (($realityNodes ?? []) as $rn) {
+    $s = json_decode_field($rn['start_location'] ?? null);
+    $e = json_decode_field($rn['end_location'] ?? null);
+    $hasS = !empty($s['lng']) && !empty($s['lat']);
+    $hasE = !empty($e['lng']) && !empty($e['lat']);
+    $sname = trim((string)($s['name'] ?? ''));
+    $ename = trim((string)($e['name'] ?? ''));
+    if (!$hasS && !$hasE && $sname === '' && $ename === '') {
+        continue;   // 坐标和地名一个都没有的节点不上地图
+    }
+    $imgId = (int)($nodeFirstImage[(int)$rn['id']] ?? 0);
+    $routeNodes[] = [
+        'id'    => (int)$rn['id'],
+        'title' => (string)($rn['title'] ?: '（无标题节点）'),
+        'icon'  => (string)($rn['node_type_icon'] ?: '📍'),
+        'img'   => $imgId > 0 ? media_att($imgId) : '',
+        'url'   => url('nodes/show', ['id' => (int)$rn['id']]),
+        'sname' => $sname,   // 出发地名：没有坐标时交给高德地理编码兜底
+        'ename' => $ename,   // 到达地名：同上
+        'start' => $hasS ? ['lng' => (float)$s['lng'], 'lat' => (float)$s['lat']] : null,
+        'end'   => $hasE ? ['lng' => (float)$e['lng'], 'lat' => (float)$e['lat']] : null,
+    ];
+}
+?>
+<?php if ($routeNodes !== []): ?>
+<section class="route-map-section">
+    <h2 class="section-title" id="route-map">🗺️ 行程路线</h2>
+    <div class="route-map" id="route-map-canvas"
+         data-route="<?= e(json_encode($routeNodes, JSON_UNESCAPED_UNICODE)) ?>"></div>
+    <p class="muted route-map-hint">
+        按时间顺序连出的执行节点路线（节点间虚线衔接），圆标在每段行程的中间，点它可打开对应节点。
+        <span class="route-legend-end">红点</span> = 到达地。只有地名没坐标的地点会自动向高德查询定位，太偏僻的地名可能查不到。
+    </p>
+</section>
+<script>
+(function () {
+    'use strict';
+    var el = document.getElementById('route-map-canvas');
+    if (!el) return;
+
+    /* AMap 脚本加载失败（罕见）时给一句人话，不白屏 */
+    if (typeof AMap === 'undefined' || window.__AMAP_ERROR) {
+        el.innerHTML = '<p class="route-map-fallback">地图脚本没有加载成功，暂时无法显示路线。</p>';
+        return;
+    }
+    var route;
+    try {
+        route = JSON.parse(el.getAttribute('data-route') || '[]');
+    } catch (e) {
+        return;
+    }
+    if (!route.length) return;
+
+    var map = new AMap.Map(el, { viewMode: '2D', zoom: 5 });
+    var overlays = [];   // 当前画上去的所有覆盖物；地理编码补点后整体重画
+
+    /* 全量重画：先清掉旧覆盖物再按当前 route 数据画。
+       地理编码是异步的，一个点查回来就重画一次，数据是幂等的。 */
+    function drawRoute() {
+        overlays.forEach(function (o) { map.remove(o); });
+        overlays = [];
+        var inPath = [];    // 节点内：出发地 → 到达地（实线）
+        var hopPath = [];   // 节点之间：上一站到达地 → 下一站出发地（虚线）
+        var prevEnd = null;
+
+        route.forEach(function (n, i) {
+            var s = n.start, en = n.end;
+
+            if (s && en) inPath.push([s.lng, s.lat], [en.lng, en.lat]);
+            if (s && prevEnd) hopPath.push([prevEnd.lng, prevEnd.lat], [s.lng, s.lat]);
+
+            /* 圆形标记放这段行程线的中点（起终点都有才取中点），缺一头就放有的一头 */
+            var pos = (s && en)
+                ? [(s.lng + en.lng) / 2, (s.lat + en.lat) / 2]
+                : (s || en);
+            if (pos) {
+                var html = '<div class="route-marker" title="' + n.title.replace(/"/g, '&quot;') + '">'
+                    + (n.img
+                        ? '<img src="' + n.img + '" alt="">'
+                        : '<span class="route-marker-emoji">' + n.icon + '</span>')
+                    + '<span class="route-marker-num">' + (i + 1) + '</span>'
+                    + '</div>';
+                var marker = new AMap.Marker({
+                    position: pos,
+                    content: html,
+                    anchor: 'center',
+                    map: map,
+                });
+                marker.on('click', function () { window.location.href = n.url; });
+                overlays.push(marker);
+            }
+
+            /* 到达地小圆点（和出发地不是同一点时才画） */
+            if (en && (!s || en.lng !== s.lng || en.lat !== s.lat)) {
+                var dot = new AMap.Marker({
+                    position: [en.lng, en.lat],
+                    content: '<div class="route-end-dot"></div>',
+                    anchor: 'center',
+                    map: map,
+                });
+                dot.on('click', function () { window.location.href = n.url; });
+                overlays.push(dot);
+            }
+
+            prevEnd = en || s;
+        });
+
+        if (inPath.length > 1) {
+            overlays.push(new AMap.Polyline({
+                path: inPath, strokeColor: '#3B82F6', strokeWeight: 5,
+                strokeOpacity: 0.9, lineJoin: 'round', showDir: true, map: map,
+            }));
+        }
+        if (hopPath.length) {
+            overlays.push(new AMap.Polyline({
+                path: hopPath, strokeColor: '#94A3B8', strokeWeight: 3,
+                strokeStyle: 'dashed', strokeOpacity: 0.8, map: map,
+            }));
+        }
+        if (overlays.length) map.setFitView(null, false, [50, 50, 50, 50]);
+    }
+    drawRoute();
+
+    /* 只有地名、没有坐标的地点：向高德地理编码查坐标（插件按需加载）。
+       查到就补进数据并重画；查不到（地名太偏/写错）保持缺省，不硬造位置。 */
+    function geocode(name, cb) {
+        if (!name) return;
+        AMap.plugin('AMap.Geocoder', function () {
+            try {
+                new AMap.Geocoder({}).getLocation(name, function (status, result) {
+                    if (status === 'complete' && result && result.geocodes && result.geocodes.length
+                        && result.geocodes[0].location) {
+                        var loc = result.geocodes[0].location;
+                        cb({ lng: Number(loc.getLng()), lat: Number(loc.getLat()) });
+                    }
+                });
+            } catch (e) { /* 地理编码服务不可用时保持原状 */ }
+        });
+    }
+    route.forEach(function (n) {
+        if (!n.start && n.sname) geocode(n.sname, function (p) { n.start = p; drawRoute(); });
+        if (!n.end && n.ename) geocode(n.ename, function (p) { n.end = p; drawRoute(); });
+    });
+})();
+</script>
+<?php endif; ?>
+
 <div class="timeline-grid">
     <section class="timeline-col">
         <h2>📋 计划 (<?= count($planNodes) ?>)</h2>
@@ -54,129 +213,6 @@
     </section>
 </div>
 
-<?php
-/* ── 路线地图（批 10）──────────────────────────────
-   按时间顺序把执行节点的起终点连成路线：节点内实线、节点之间虚线；
-   每个节点在起点（没有起点就放终点）放一个圆形标记 ——
-   有图片附件显示图片，没有显示节点类型 emoji，左上角带序号，
-   点一下打开该节点详情。AMap 2.0 已由 layout.php 全局加载。 */
-$routeNodes = [];
-$nodeFirstImage = $nodeFirstImage ?? [];
-foreach (($realityNodes ?? []) as $rn) {
-    $s = json_decode_field($rn['start_location'] ?? null);
-    $e = json_decode_field($rn['end_location'] ?? null);
-    $hasS = !empty($s['lng']) && !empty($s['lat']);
-    $hasE = !empty($e['lng']) && !empty($e['lat']);
-    if (!$hasS && !$hasE) {
-        continue;   // 起终点一个坐标都没有的节点不上地图
-    }
-    $imgId = (int)($nodeFirstImage[(int)$rn['id']] ?? 0);
-    $routeNodes[] = [
-        'id'    => (int)$rn['id'],
-        'title' => (string)($rn['title'] ?: '（无标题节点）'),
-        'icon'  => (string)($rn['node_type_icon'] ?: '📍'),
-        'img'   => $imgId > 0 ? media_att($imgId) : '',
-        'url'   => url('nodes/show', ['id' => (int)$rn['id']]),
-        'start' => $hasS ? ['lng' => (float)$s['lng'], 'lat' => (float)$s['lat']] : null,
-        'end'   => $hasE ? ['lng' => (float)$e['lng'], 'lat' => (float)$e['lat']] : null,
-    ];
-}
-?>
-<?php if ($routeNodes !== []): ?>
-<section class="route-map-section">
-    <h2 class="section-title" id="route-map">🗺️ 行程路线</h2>
-    <div class="route-map" id="route-map-canvas"
-         data-route="<?= e(json_encode($routeNodes, JSON_UNESCAPED_UNICODE)) ?>"></div>
-    <p class="muted route-map-hint">
-        按时间顺序连出的执行节点路线（节点间虚线衔接），点标记可打开对应节点。
-        线上圆标 = 节点出发地，<span class="route-legend-end">红点</span> = 到达地。
-    </p>
-</section>
-<script>
-(function () {
-    'use strict';
-    var el = document.getElementById('route-map-canvas');
-    if (!el) return;
-
-    /* AMap 脚本加载失败（罕见）时给一句人话，不白屏 */
-    if (typeof AMap === 'undefined' || window.__AMAP_ERROR) {
-        el.innerHTML = '<p class="route-map-fallback">地图脚本没有加载成功，暂时无法显示路线。</p>';
-        return;
-    }
-    var route;
-    try {
-        route = JSON.parse(el.getAttribute('data-route') || '[]');
-    } catch (e) {
-        return;
-    }
-    if (!route.length) return;
-
-    var map = new AMap.Map(el, { viewMode: '2D', zoom: 5 });
-    var inNodePath = [];    // 节点内：出发地 → 到达地（实线）
-    var hopPath = [];       // 节点之间：上一站到达地 → 下一站出发地（虚线）
-    var prevEnd = null;
-
-    route.forEach(function (n, i) {
-        var s = n.start, en = n.end;
-
-        /* 节点内实线 */
-        if (s && en) {
-            inNodePath.push([s.lng, s.lat], [en.lng, en.lat]);
-        }
-
-        /* 节点间虚线（衔接上一站的到达地） */
-        if (s && prevEnd) {
-            hopPath.push([prevEnd.lng, prevEnd.lat], [s.lng, s.lat]);
-        }
-
-        /* 圆形标记：优先放在出发地，只有到达地就放到达地 */
-        var pos = s || en;
-        if (pos) {
-            var html = '<div class="route-marker" title="' + n.title.replace(/"/g, '&quot;') + '">'
-                + (n.img
-                    ? '<img src="' + n.img + '" alt="">'
-                    : '<span class="route-marker-emoji">' + n.icon + '</span>')
-                + '<span class="route-marker-num">' + (i + 1) + '</span>'
-                + '</div>';
-            var marker = new AMap.Marker({
-                position: [pos.lng, pos.lat],
-                content: html,
-                anchor: 'bottom-center',
-                map: map,
-            });
-            marker.on('click', function () { window.location.href = n.url; });
-        }
-
-        /* 到达地小圆点（和出发地不是同一点时才画） */
-        if (en && (!s || en.lng !== s.lng || en.lat !== s.lat)) {
-            var dot = new AMap.Marker({
-                position: [en.lng, en.lat],
-                content: '<div class="route-end-dot"></div>',
-                anchor: 'center',
-                map: map,
-            });
-            dot.on('click', function () { window.location.href = n.url; });
-        }
-
-        prevEnd = en || s;
-    });
-
-    if (inNodePath.length > 1) {
-        map.add(new AMap.Polyline({
-            path: inNodePath, strokeColor: '#3B82F6', strokeWeight: 5,
-            strokeOpacity: 0.9, lineJoin: 'round', showDir: true,
-        }));
-    }
-    if (hopPath.length) {
-        map.add(new AMap.Polyline({
-            path: hopPath, strokeColor: '#94A3B8', strokeWeight: 3,
-            strokeStyle: 'dashed', strokeOpacity: 0.8,
-        }));
-    }
-    map.setFitView(null, false, [50, 50, 50, 50]);
-})();
-</script>
-<?php endif; ?>
 
 <?php
 $commentTargetType = \App\Comments::TARGET_ACTIVITY;