集章地圖模板

旅遊餐飲行程

示例：老城尋味 · 集章地圖 · 點亮地圖

幫我做一張美食打卡集章地圖，發成一個網頁連結，遊客在路上用手機開啟：頂上一行主辦方和活動日期、路線名，下面「已集 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 關掉

看模板原始碼 ›

這份哪裡不合適？提改進建議模板工廠每天看一次，改好了寫進改進記錄

集章地圖模板

同類案例