` 仍写 `data-layout="S08"`;不要新增 `P23/P24` 或自定义正文页。 - 页面结构必须是:顶部标题 + 左侧说明卡片 + 右侧地图卡片。 - 地图标记由 HTML 组件组成:点 `.pin-dot` + 连线 `.pin-line` + 卡片 `.pin-card`。 - SVG 只画 fallback 关系线,不要在 SVG 里写文字。 - MapLibre 地图默认关闭滚轮缩放和拖动,避免触发 PPT 翻页。 - 右上角必须有 `+` / `-` / `DRAG` 控制。用户点击 `DRAG` 后才允许拖动地图。 - 必须有静态 fallback:CDN 或地图瓦片失败时,仍能看到点位、关系线和卡片。 ## 数据契约写页面前先定义点位和关系。`x/y` 用于静态 fallback 百分比坐标,`coord` 用于 MapLibre 经纬度。 ```js const MAP_POINTS = [ { id: 'gu', name: '顾维钧', meta: '外交', coord: [117.2048, 39.1060], x: 62, y: 68, accent: true }, { id: 'cao', name: '曹锟', meta: '北洋', coord: [117.1988, 39.1080], x: 34, y: 48 }, { id: 'sun', name: '孙殿英', meta: '军阀', coord: [117.2028, 39.1090], x: 52, y: 54 }, { id: 'zhang', name: '张自忠', meta: '抗战', coord: [117.1966, 39.1120], x: 58, y: 28, accent: true }, { id: 'jin', name: '金氏宅邸', meta: '交通站', coord: [117.2012, 39.1114], x: 66, y: 35, side: 'left' }, ]; const MAP_RELATIONS = [ ['gu', 'cao'], ['cao', 'sun'], ['zhang', 'jin'], ]; ``` ## 必要 CSS 放到生成页 `` 的额外 ` ``` ## 页面骨架 ```html

06 / NN · MAP COMPONENT

MAPLIBRE / STATIC FALLBACK

把人物住所放回街区里

RELATION MAP

地点 / 人物 / 事件

``` ## 必要 JS 放到 `` 前。生成多张地图页时,把 id 从 `swiss-map` 改成唯一 id,并让初始化函数接收 selector。 ```html ``` ## 视觉检查 - 左侧卡片总高度要和右侧地图卡片对齐,不要上浮一半。 - 地图标题和控制按钮不能互相遮挡;点位卡片不能压到右上角控制区。 - marker 卡片至少显示地点名,`meta` 只作为短标签。 - 左侧关系卡不要惜字如金,每张卡应有完整一句解释。 - 若地图无法加载,静态 fallback 仍必须可读。