认领 #147 楼许愿，把"别让爸妈说我不累"做成了真东西
大家好，我认领了活动帖 #147 楼的许愿需求：【中秋国庆VibeCoding】你出题，我来做，用 TraeCode 做个节日小应用 - #3，来自 xixihaha
“我想要一个【带爸妈出游的’省脚力’路线卡】，解决双节带父母旅行时，攻略只告诉我哪里好玩，却没告诉我一路要走多久、哪里能坐下休息、找厕所方不方便的问题……”
我的思路
比起一天打卡十个景点，我更想让爸妈不用说"我不累"。这个 demo 的核心不是"去更多地方"，而是"走得动、找得到厕所、累了能随时调整"。
核心功能
- 一键生成示例路线：支持北京、上海、广州、成都、杭州、西安、武汉、南京、苏州、重庆、深圳 11 个城市，也可以手动搜索任意景点
- 长辈步速折算：高德步行时间 ×1.6，年轻人走 15 分钟的路，爸妈可能要走 25 分钟
- 周边厕所自动标注：每站自动搜 700 米内公厕，到了不用问人
- 自定义休息点/台阶提醒：“神武门出来有长椅，先歇 10 分钟”
- “累了就跳过”：一键变灰，路线自动重算，总时长实时更新
- 大字版路线卡导出：一键生成图片，直接发家庭群，爸妈不用注册、不用下载 App，点开就能看
技术栈
- 纯前端：HTML + CSS + JavaScript，单文件可运行
- 地图服务：高德地图 JSAPI（选址、步行规划、周边搜索）
- 图片导出：html2canvas
- 无后端、无数据库，打开即用
技术原理
- 城市切换：高德地理编码 API 把城市名转成 adcode，作为搜索范围
- 景点搜索：PlaceSearch + AutoComplete 组合，支持模糊匹配
- 步行规划：Walking 插件，两两景点之间算路径和时间
- 周边厕所：searchNearBy 以景点为中心搜 700 米内"公厕"
- 大字卡：DOM 渲染后 html2canvas 截图转 PNG 下载
演示视频
（此处上传视频 20260926_204541.mp4）
代码开源
代码整理中，稍后开源。
为什么没做完整版 + 成本限制
- Key 配额限制：高德个人开发者每日免费调用量有限（几千次/天），demo 演示够用，但公开给几百人同时用会超量。所以只做了演示视频，没公开部署地址。
- 休息点数据：全国"哪里有长椅"没有公开数据库，所以做成了手动标注——让熟悉路线的人（比如爸妈自己）标记，比 AI 瞎猜更准。
- 视频里的数据是真实调用的：不是 mock 数据，是真实的高德 API 返回的步行时间和距离。
未来想做的（如果继续迭代）
- 接入天气 API，提醒"今天太晒，建议缩短行程"
- 语音播报：“下一站还有 800 米，建议休息一下”
- 家庭共享：多人同时编辑同一张路线卡
成本
- 开发积分：约 2000（TraeCode 生成 + 调试）
- 现金成本：0 元（高德免费配额内）
- 时间：约 3 小时（含调试和录屏）
这个 demo 虽然小，但解决的是真实痛点——长辈出游的体力管理和如厕焦虑。技术不复杂，但把"不让爸妈硬撑"这个需求做透了。
#中秋国庆 VibeCoding