引言
每次旅行回来都是同一个套路：拍几百张照片，挑九张发个朋友圈，然后就没有然后了。那些城市、当时脑子里想的那些事，全散在相册和备忘录里，再也没翻过。
翻了一圈现成的旅行 App，不是不好，是太重。要注册、要登录、要授权定位，照片还得传到别人服务器上。我只是想把"我去过哪儿、当时在想什么"记下来，犯不着填这么多表。
所以趁着国庆假期有空，拉着 AI 搭档搓了一个，叫「玩转地球」。要求就两条：自己用起来不卡，照片别在别人服务器上。做完顺手报了个 WorkBuddy 的旅行应用创作大赛。花了多少钱，放到文末说。
图 1：左边地球，右边是你这几年走过的地方
一、它就是个会亮的地球
左边那颗球能拖着转、能缩放，有地形有昼夜，也有一层云。去过哪个城市，那个点就亮起来，城市之间会自己连出航线，你这些年走过的地方一眼就能看全。
打卡也就几步：点一下地球上的光点，选个日期，写一句话，想传照片就传。十来秒完事。
图 2：每条足迹一张小卡片，日期、坐标、照片和一句话
二、有个细节我改了两次，说起来有点丢人
最早点「添加照片」选完图，界面一动不动。你得先打卡，回头才能确认照片到底进去没有。被问了一次："我上传以后，不知道是否传成功啊。"
我第一反应是在按钮下面补个小缩略图。结果第二天就被吐槽："怎么还放左下角，排版怪怪的。"
第三版才想明白：别加东西，换个做法。虚线上传框在你选完图的一瞬间，直接变成你那张照片，点右上角 ✕ 换掉，底下浮一行"点击更换"。位置不变，不多占地方。
图 3：选完照片，默认风景照立刻被你的照片顶掉
功能其实一直是能用的。差的那点东西，是"我知道它生效了"。
三、让它上头的小心思
十一枚徽章，纯粹给自己找动力
第一座城点亮「🌱第一步」，第五座是「🗺️五城记」，去过南半球给「🐧南半球」，同一座城去两次给「🔁故地重游」，累计里程过两万公里（按真实的大圆距离算的）给「📏万里路」。没解锁的灰着，挂一把小锁。
坦白讲这套东西没什么实际用处，就是我自己想有个"再打卡一座"的由头。结果还真管用。
中间还返工过一次：二十城那枚原本叫「环球旅行家」，跟另一枚「环球客」撞了，缩略图里根本分不清谁是谁，只好改名「二十城记」，跟五城记、十城记凑成一串。
图 4：侧栏的成就面板，9/11 的样子
最好玩的还是"一键变成一本书"
点「生成旅行手账」，所有足迹自动排成一本能翻的书：渐变封面、按日期排好的邮票卡片，还有一段读了你真实行程之后写的序言，它会说出你走了多远、跨了几个洲、哪座城是回头去的。
图 5：封面把统计、徽章、序言塞在一页里
中间夹了一张按年份和大洲的分布图，哪年跑得最勤一目了然。
图 6：年份柱状图 + 大洲色块
图 7：内页，每条足迹一张卡
它能导出成一个 HTML 文件，也能直接打印成 PDF。照片是嵌在文件里面的，发给别人或者换台电脑打开，不会变成裂图。这点后面还要吃亏，先按下不表。
四、踩过的几个坑
① 照片莫名其妙全裂了。 本地跑得好好的，一导出就全废。查了半天才反应过来，我用的是相对路径 photos/xxx.jpg，文件一旦离开那个目录，图就找不着了。后来干脆用笨办法：打包的时候把 43 张城市照片全编成 base64 塞进一个 JS 文件（1.35 MB），用的时候查表。前后折腾了三轮才算彻底治干净，中间还上线过一版裂着图的，特别尴尬。
② 同一座城市，居然去不了第二次。 换个日期在同一座城再打卡，旧记录直接没影了。原因很蠢：我拿"城市"当唯一键，写的时候觉得"一城一条"天经地义，可人是会故地重游的啊。改成每条打卡各自有 ID 之后就顺了，同城多次就是多条，手账里各出各的卡，地球上还是只亮一次。
③ 打印成 PDF，好看的排版全没了。 浏览器打印默认把背景色扔了，封面渐变直接变白板；还有一条打印提示，因为样式优先级没压住，混进了正文里。三行 CSS 解决。现在我知道了，屏幕上看到的和纸上的，不是一回事。
顺带交代一下现在的完成度，免得读着读着以为这是个半成品：3D 地球打卡、40 座城市、同城多次打卡、照片上传、11 枚成就、手账导出（HTML/PDF）、足迹导入导出、昼夜与时区视角、足迹动态播放，前前后后 18 项主回归加四套专项测试全部通过，手机和电脑浏览器都正常。
五、你的数据，就在你自己电脑上
这个东西没有服务器。打卡的每条记录、传的每张照片，都只在你自己电脑的浏览器里，不上传，也不给谁看。
代价我直说：清了浏览器数据就没了。所以补了「导出足迹 / 导入足迹」，一个 JSON 文件，随时能把东西揣走。
六、花了多少钱？零
从第一行代码到上线，整个东西是在 WorkBuddy 里跟 AI 搭档一句句聊出来的，需求、代码、debug、自动化测试、配图，全在里面完成。模型跑的是 Hy4 preview 的免费额度，算力这块没花钱。它又没有服务器，静态托管也不收费，等于运维也是零。
算一笔账：纯前端 + 本地构建 + 静态托管，三段加起来成本就是零。放以前，这个组合要凑齐至少得有台服务器、有个域名、还有一张能刷卡的卡。现在不用了。
结语
总之就是个做着玩的小东西，没账号、没服务器、点开就能上手。点「随机示例数据」可以先看看满足迹长什么样，不喜欢一键清空。
对了，它顺手报了 WorkBuddy 的旅行应用创作大赛。如果你能给投一票，我可以拿来当个正面反馈，接着把剩下那几个想做没做的功能补完。链接在这儿：
玩转地球 → https://www.workbuddy.link/p/02Bc1jnm8swmkJCHh8eRiH
活动页（投票在这）→ https://www.workbuddy.link/p/z1Wi4ybJ7J9YN44xNC81Ox
转发也行：转给你身边那个"每年都喊着要去旅行、然后哪也没去"的朋友。说不定点亮第一座城市之后，人就真出发了。
关于 AI 智能体研究
欢迎关注“AI 智能体研究”！这里聚焦 AI 智能体前沿成果，解析技术原理，探讨应用场景。无论是技术爱好者还是行业探索者，都能获取最新资讯与深度见解。一起探索 AI 智能体的无限可能，共赴科技未来！
如果这篇文章对您有帮助，欢迎：
🌟 点赞收藏：方便日后查阅参考
📤 转发分享：让更多同行获得有价值的信息
👀 关注我们：每日获取最新资讯，不错过关键动态
您的每一次互动，都是我们持续输出优质内容的动力。
往期回顾
-
Google学习三剑客：从小白到专家的AI学习神器 -
Claude Code Router完全指南：以OpenRouter配置为例 -
AI学习工具三剑客：NotebookLM、Gemini Guided Learning与ChatGPT Study深度对比