用 Codex 做一张可点击的城市地图：三站数据、提示词与手机回退实作

admin 设计创意 7小时前

18 0

飞行地图案例最值得学的不是复制驾驶舱配色，而是“先把真实约束交给原型”。本站用一个轻量题目演示同一方法：从三个地点坐标出发，让 Codex 帮我们做一张可以点、可以切换、手机不留空白的城市散步地图。下面五张图来自本站实际运行的原型，不是 Figma 或航空产品截图，也不是 AI 生成的假界面。

本站实际制作的城市散步地图桌面总览：地点列表、巴黎地图与三站连线 — 本站原型桌面总览；底图与地理数据署名 OpenFreeMap、OpenMapTiles、OpenStreetMap。

先明确使用场景与边界

适合展览导览、咖啡馆线路、城市摄影计划和作品集交互样稿。不适合直接作为无障碍导航、实时交通、开放时间查询或安全关键地图。本站用三座巴黎博物馆的示例坐标练习信息层级；图上的虚线只是故事顺序，不是道路导航，也没有测量实际距离。想上线给真实游客用，必须核对入口、营业信息、许可、地理误差与服务可用性。

步骤 1：把地点数据和读者动作写成一页简报

选择橘园美术馆后地图标记与左侧列表一起改变状态 — 本站原型第二站选中状态：列表、标记、说明同步，不只换一张静态配图。

不要只给 Codex 一句“做个高级地图”。至少交代谁会看、坐标从哪里来、点击会发生什么、桌面与手机各先显示什么，以及哪些数据不能假装有。这里的三站是一组可替换的教学数据；正式项目应逐站核实坐标与名称。

const places = [
  {id:1, name:'卢浮宫', coord:[2.3376,48.8606]},
  {id:2, name:'橘园美术馆', coord:[2.3227,48.8638]},
  {id:3, name:'奥赛博物馆', coord:[2.3266,48.8599]}
];
const map = new maplibregl.Map({
  container:'map',
  style:'https://tiles.openfreemap.org/styles/positron',
  center:[2.331,48.862], zoom:13.4
});
// 选中地点时同步：列表 active、标记 active、说明、地图中心。
// 虚线只是站点顺序，不应向读者宣称可步行导航。

步骤 2：把完整任务直接交给 Codex

下面是本站根据官方前端提示建议和本次原型独立整理的可复制示例提示词，并非 Lufthansa Systems 或 Figma 作者公开的原始 prompt。把它放进有文件读写权限的 Codex 工作目录，再让它创建页面：

请在一个空目录里制作可运行的“巴黎左岸三站”响应式地图原型，交付 HTML、CSS、JS 文件，并说明启动方式。目标读者是第一次浏览城市散步路线的人；首屏要直接看到地图和站点，而不是营销文案。
数据只有三站：卢浮宫 [2.3376,48.8606]、橘园美术馆 [2.3227,48.8638]、奥赛博物馆 [2.3266,48.8599]。这些坐标是界面示例，不代表实时入口、开放时间或导航路径。
使用 MapLibre GL JS 与 OpenFreeMap 的 positron 样式。桌面是列表加地图；手机先显示地图，再显示列表。点击列表或标记，必须同步高亮、显示地点说明，并能继续切换。路线只表示阅读顺序，用虚线并标注“不是导航路线”。保留 OpenFreeMap、OpenMapTiles 和 OpenStreetMap 署名及链接。
请覆盖默认、第二站选中、第三站选中三种状态；检查 1280px 桌面和 390px 触屏宽度，没有水平溢出、文字遮挡、空白地图或不可点击的标记。若手机端 WebGL 地图无法可靠显示，使用带原始地图署名的静态底图与可点击 HTML 标记做回退，不要让用户看到空白。报告你实际验证过什么；未验证的内容不要声称通过。

本站地图原型切换至奥赛博物馆后的第三站状态 — 第三站状态：点击后列表与地图反馈一致；飞行式动画只是原型效果，不承担导航意义。

步骤 3：先查交互状态，再讨论是否漂亮

本站用 MapLibre GL JS、OpenFreeMap 底图和三个 HTML 标记搭出原型。检查时按“默认→第二站→第三站→返回第一站”逐个点击；不要只拍第一屏。还要检查地图缩放后标记没有丢失、图层未遮住文字、链接能打开，以及地图数据署名始终可见。若你换了真实项目坐标，最常见的错误是经纬度顺序写反：这里数组顺序是 [经度, 纬度]。

本站城市地图原型手机端总览，包含地图底图、可点击标记和下方地点列表 — 390px 手机端：地图在上，地点列表在下；为避免某些触屏环境 WebGL 空白，本站实作了保留来源署名的静态地图回退与可点击标记。

步骤 4：手机端要有回退，不让第一屏变成空白

本站实际浏览器复测时，窄屏桌面渲染正常，但模拟触屏环境的 WebGL 底图出现过空白。我们没有把“canvas 元素存在”误判成用户能看见地图，而是用已核对的地图底图加独立 HTML 标记做手机回退：点击仍会更新地点说明和列表状态。这不具备实时平移缩放；如果项目确实需要完整移动地图，应在真实 iOS/Android 设备上复测、监控瓦片加载，并进一步排查 WebGL 与浏览器兼容性。

手机端选择橘园美术馆后地图标记与地点说明同步变化 — 手机端第二站的实测画面：底图、标记和文字都可见，交互状态与桌面一致。

常见失败、成本与版权

看不到地图：先查网络请求、容器高度和浏览器图形支持，再用可见回退；不要只看页面没有报错。标记和说明不同步：用唯一地点 ID 管理选中状态，列表和标记只调用同一个更新函数。路线误导：虚线请标注“示意顺序”，不要让读者以为它是导航。大量地点卡顿：这份原型只有三站，大量点位需要聚合、视窗加载和可访问性设计。费用和许可：MapLibre 是开源库；OpenFreeMap 的公共服务及其条款应在部署前重新核对，不承诺 SLA。底图必须保留 OpenFreeMap、OpenMapTiles 与 OpenStreetMap 署名；摄影、场馆照片或商业字体还需各自授权。本文截图只是本站原型，不可冒充官方产品 UI。