集章地图模板

旅游餐饮行程

示例：老城寻味 · 集章地图 · 点亮地图

帮我做一张美食打卡集章地图，发成一个网页链接，游客在路上用手机打开：顶上一行主办方和活动日期、路线名，下面「已集 3 / 8」和八个小圆点；首屏是一张手绘风的城市地图（街巷、一条河和桥、几个地标、指北针和比例尺），八个打卡点的图钉沿一条虚线路线排开、标上店名，能双指缩放和拖动、电脑上滚轮缩放，下一站的图钉高亮、轻轻脉冲，已经去过的点画成不同颜色的圆形印章；点图钉从底部弹出抽屉：第几站和地点、店名、招牌菜配一个小插画、人均、营业时间、一句像本地人说的推荐、今天多少人来过、到下一站步行几分钟，再加一个称呼输入框和「我到了 · 盖章」大按钮，提交存进数据表，存好后图钉变成印章、带盖章动画和一声闷响（可静音）；集满八个弹一张证书卡，写上称呼、日期、八个印章和领奖地点。地图下面按顺序列出八家店的完整信息，再写几条出发前的须知（全程距离、店休、领奖规则）。颜色清爽，少用底色块；不跑脚本时地图下面的列表和一张普通表单也能用。店家信息有变就更新同一个链接。

参考模板：先读 https://space.24haowan.com/examples/sample-checkin-map/agent.md ，照它的结构和版式做，内容全部换成我的；做成一个单文件 HTML（样式写在页面里、不引用外部文件，手机上好看），并提供 .html 文件下载。
· 你有活页工具（MCP）：用样例 sample-checkin-map 当底稿（list_examples key=sample-checkin-map），发成活页，先给我看预览。
· 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-checkin-map ，把返回的预览链接和认领链接给我（7 天临时链接）。
如果你还没有活页连接器（MCP），先读 https://space.24haowan.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

豆包、DeepSeek、Kimi、元宝、ChatGPT、Claude……能上网读链接的都可以

看真页面

发成微信里能打开的链接

WorkBuddy、Claude、Codex 等支持 MCP 的 Agent，微信扫码登录

第一次在 WorkBuddy 里接活页？看图文手册 ›

帮我接入活页：先读 https://space.24haowan.com/for-agents.md ，一步步带我完成；然后参考 https://space.24haowan.com/examples/sample-checkin-map/agent.md 做一份我自己的「老城寻味 · 集章地图」，发成活页，先给我看预览。

我的要求：帮我做一张美食打卡集章地图，发成一个网页链接，游客在路上用手机打开：顶上一行主办方和活动日期、路线名，下面「已集 3 / 8」和八个小圆点；首屏是一张手绘风的城市地图（街巷、一条河和桥、几个地标、指北针和比例尺），八个打卡点的图钉沿一条虚线路线排开、标上店名，能双指缩放和拖动、电脑上滚轮缩放，下一站的图钉高亮、轻轻脉冲，已经去过的点画成不同颜色的圆形印章；点图钉从底部弹出抽屉：第几站和地点、店名、招牌菜配一个小插画、人均、营业时间、一句像本地人说的推荐、今天多少人来过、到下一站步行几分钟，再加一个称呼输入框和「我到了 · 盖章」大按钮，提交存进数据表，存好后图钉变成印章、带盖章动画和一声闷响（可静音）；集满八个弹一张证书卡，写上称呼、日期、八个印章和领奖地点。地图下面按顺序列出八家店的完整信息，再写几条出发前的须知（全程距离、店休、领奖规则）。颜色清爽，少用底色块；不跑脚本时地图下面的列表和一张普通表单也能用。店家信息有变就更新同一个链接。

分享海报

微信里长按图片保存或转发给朋友；扫码就能打开这个模板。

下载海报

这份模板

一条有几个点要依次走到的路线：文旅集章、美食探店、景区打卡、商圈寻宝、校园定向，读者在路上用手机打开、到一处点一下，集满有个结果，选它。只是告诉家人几天怎么走、住哪儿选 sample-weekend-trip；带地图的单场邀请（怎么到饭店）选 sample-invitation；按场次收报名选 sample-event-signup。

页面结构：集章地图 · 八家店 · 出发前看一眼

首屏一张可缩放、可拖动的手绘地图（内联 SVG），盖过章的点变成彩色印章，盖章有动画和声音
到店盖章写回数据表（原生表单 POST ./_data/stamps），页面读回每一站「今天 N 人来过」
集满出一张值得截图的证书卡；店家信息有变更新同一个链接

发之前要备好：数据表 stamps（列 name / spot，append_open=true）：到店盖章写进这里，页面读回每一站今天来过几人；发布前先用 set_data 建好，活动结束后把 append_open 关掉

看模板源码 ›

这份哪里不合适？提改进建议模板工厂每天看一次，改好了写进改进记录

集章地图模板

同类案例