feat: add RoadbookMaker project documentation for GitHub and Zhihu

Author: chenxuan520

docs/juejin_article.md

@@ -0,0 +1,106 @@
+# 厌倦了地图API的各种限制？我做了个开源路书工具，离线也能玩！
+
+嗨，大家好，我是 **chenxuan520**。作为一个热爱旅游的开发者，我一直在寻找一款称手的路书规划工具，但市面上的产品总有些不尽如人意的地方：要么需要繁琐的API Key申请，要么在网络不佳时无法使用，要么就是担心自己的行程数据隐私。
+
+于是，我决定自己动手，`RoadbookMaker` 由此诞生。它是一个**完全免费、无需注册、无需任何API Key、甚至可以完全离线使用的路书规划工具**。最重要的是，它完全开源。
+
+**项目与在线体验地址：**
+
+*   **GitHub地址**: <https://github.com/chenxuan520/roadbook>
+*   **在线体验**: <https://map.chenxuanweb.top>
+
+<p align="center">
+  <img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/ea246ef1950d4a2b8e187f478099787d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgY2hlbnh1YW41MjA=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiNjAyOTcyOTE4OTA3NzIwIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1765356421&x-orig-sign=vqvzKlYsH1AY3C6KYP%2BLEIzjumg%3D" alt="RoadbookMaker Logo" width="250" height="250">
+</p>
+
+***
+
+## 核心优势：简单，但强大
+
+在深入了解如何使用前，先快速概览一下 `RoadbookMaker` 最核心的几个优势：
+
+*   **🚀 真正的零门槛**
+    *   **无需API Key**: 无需注册任何地图厂商的开发者账号，免去申请和配置Key的烦恼。
+    *   **无需注册登录**: 没有账户体系，打开即用。
+    *   **完全离线可用**: 核心功能在断网时依旧可用，所有数据默认安全地存储在你的浏览器本地。
+
+*   **📱 极致的用户体验**
+    *   **手机端完美适配**: 响应式设计，在手机上也能获得流畅的规划体验。
+    *   **一键集成**：无缝跳转至**导航**（百度、高德、Google）、**携程订票**、**Google酒店**和**小红书**攻略，实现从规划到出行的一站式服务。
+    *   **快捷键支持**: 提供 `A` 添加、`C` 连接、`D` 删除等全键盘快捷键，大幅提升规划效率。
+
+*   **🏠 便捷的自托管**
+    *   **Docker一键部署**: 提供 Docker 镜像，一条命令就能在自己的服务器或NAS上拥有它。
+    *   **数据私有**：自托管意味着数据完全由你掌控，隐私安全感拉满。
+
+## 手把手教你用 RoadbookMaker 规划一次旅行
+
+下面，我们通过一个实例，看看用它规划一次“周末城市漫步”有多简单。
+
+### 第一步：添加你的足迹
+
+打开网站，界面就是一张简洁的地图。你可以通过顶部的搜索框寻找地点，或者直接在地图上进行操作。
+
+![image.png](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/79f43ec79f174d55a45f56eca594d317~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgY2hlbnh1YW41MjA=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiNjAyOTcyOTE4OTA3NzIwIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1765356743&x-orig-sign=XI%2BhMlXbo3s5yfTZWi6G1%2F4ibfk%3D)
+
+*   **添加标记点**：点击顶部的 “添加标记点” 按钮，或直接按快捷键 `A`，鼠标会变成一个十字准星。在地图上你感兴趣的位置点击一下，一个标记点就添加好了。
+
+
+![image.png](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/360b6f41ecf747d39908a8caf534c765~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgY2hlbnh1YW41MjA=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiNjAyOTcyOTE4OTA3NzIwIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1765356781&x-orig-sign=ILHaIy9cVN0Dq9Jl5Lt%2FipwC2n0%3D)
+### 第二步：连接成线，规划路线
+
+当你在地图上标记了几个点后（比如咖啡馆、书店、公园），就可以将它们连接起来形成路线。
+
+*   **连接标记点**：点击“连接标记点”按钮或按 `c`，在弹出的窗口中选择起始点和目标点，并选择一种交通方式，例如“步行”🚶。一条代表路线的连接线就生成了。
+
+
+![image.png](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/5cd176611099498e885a40e55c162892~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgY2hlbnh1YW41MjA=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiNjAyOTcyOTE4OTA3NzIwIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1765357004&x-orig-sign=OWgwyiTfV1%2FEMcm1lpMYjr9P7YY%3D)
+
+
+![image.png](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/a0f23b51b7864a87b89c5162e1fccf74~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgY2hlbnh1YW41MjA=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiNjAyOTcyOTE4OTA3NzIwIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1765357057&x-orig-sign=Cm0QpuvVNc8Kkm%2FXYN%2Bq8JJAEWM%3D)
+
+### 第三步：丰富你的行程细节
+
+现在，路书已经有了基本的框架，我们可以为它填充更多细节。
+
+*   **编辑标记点**：单击任意一个标记点，右侧会滑出详情面板。在这里，你可以：
+    *   修改名称，设置到达和离开的**时间**。
+    *   为它更换一个醒目的**图标**（支持数字、Emoji或自定义文字）。
+    *   通过 “**去小红书搜一搜**” 链接，直接探索这个地点的周边玩法。
+    *   通过 “**Google酒店搜索**” 快速查找附近的住宿。
+
+*   **编辑连接线**：同样，单击连接线，也可以在详情面板中：
+    *   设置这段路程的**耗时**。
+    *   一键跳转到**百度/高德/Google地图**进行导航。
+    *   如果交通方式是“火车”🚄或“飞机”✈️，还会出现**携程订票**的快捷链接。
+
+
+![image.png](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/b6a3527527714fd583e9e031d419818e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgY2hlbnh1YW41MjA=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiNjAyOTcyOTE4OTA3NzIwIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1765357223&x-orig-sign=6Bw%2B5KpvlScMGybOTO5PMp6GCyg%3D)
+
+### 第四步：分享与备份你的路书
+
+规划完成后，你可以轻松地将成果分享给朋友或进行备份。
+
+*   **导出HTML**：这是 `RoadbookMaker` 的一个特色功能。它能生成一个独立的HTML文件，这个文件**内置了所有地图数据和交互功能**。你可以把这个文件发给任何人，对方在任何设备上用浏览器打开，就能看到和你一模一样的路书，无需安装任何东西，当然导出的html路书也可重新导入。
+*   **导出JSON**：如果你想在其他设备上继续编辑，可以导出为JSON文件，之后再通过“导入路书”功能恢复。
+
+## 背后的技术思考
+
+为了实现上述流畅且零门槛的体验，我在技术上做了一些选型和实现。
+
+*   **前端 (Vanilla JS + Leaflet.js)**: 前端选择了原生JavaScript，配合强大的开源地图库 `Leaflet.js`。这样做的好处是极致的轻量化，无需任何构建步骤，保证了快速加载和响应，也为完全离线使用打下了基础。
+
+*   **后端 (Go + Gin)**: 后端采用Go语言开发，主要为了实现高性能的API服务和极简的部署。Go可以将整个应用编译成一个无依赖的二进制文件，这使得Docker镜像可以做到非常小。
+
+*   **“无需API Key”的秘密**: 后端的一个核心功能是作为**API代理**。它将前端发来的搜索请求，代为请求百度、天地图等服务，并处理好坐标系转换（例如国内的GCJ-02火星坐标系），最后将干净、统一的数据返回给前端。这样就巧妙地绕开了前端直接调用地图API会遇到的Key暴露和跨域问题。
+
+## 写在最后
+
+`RoadbookMaker` 是我利用业余时间，从解决自身痛点出发，逐步打磨而成的项目。它不追求大而全，而是专注于将“路线规划”这一核心体验做到简单、纯粹、不受限制。
+
+如果你觉得这个项目对你有帮助，或者你也认同它的理念，请在 GitHub 上给我一个 **Star** ⭐！你的支持是我持续更新的最大动力！
+
+再次附上地址，欢迎大家体验和贡献！
+
+*   **GitHub**: <https://github.com/chenxuan520/roadbook>
+

docs/zhihu_article.md

@@ -0,0 +1,72 @@
+
+# 我从零开发了一款开源地图工具，它甚至能完全离线使用
+
+大家好，我是 **chenxuan520**。这篇文章，我想分享一下我独立开发开源项目 `RoadbookMaker` 的完整心路历程，以及它如何从一个个人痛点，成长为一个能帮助许多人自由规划旅行的工具。
+
+**项目与在线体验地址：**
+
+*   **GitHub地址**: [https://github.com/chenxuan520/roadbook](https://github.com/chenxuan520/roadbook)
+*   **在线体验**: [http://map.chenxuanweb.top](http://map.chenxuanweb.top)
+
+<p align="center">
+  <img src="../static/favicon.png" alt="RoadbookMaker Logo" width="250" height="250">
+</p>
+
+### 一、缘起：一个旅行爱好者的“开发之痒”
+
+作为一名热爱旅游的开发者，我习惯在出发前 meticulously (一丝不苟地) 规划好行程。但在使用市面上各种路书工具时，总会遇到一些让我抓狂的“小摩擦”：
+
+1.  **繁琐的API Key**：想调用个地图服务，就要先去注册开发者、创建应用、申请那串长长的Key，还得时刻担心免费额度是否超标。
+2.  **关键时刻掉链子**：精心规划的路线，一旦到了信号不佳的山区或者境外，就变成了一张无法加载的白板，瞬间失去参考价值。
+3.  **挥之不去的隐私顾虑**：所有的行程数据，包括时间、地点、备注，都托管在第三方服务器上。这让我总感觉像是将自己的日记本交给了别人保管。
+
+这些痛点反复出现，最终让我萌生了一个直接的想法：**与其不断忍受，不如自己创造一个。** 我想要的，是一款真正**纯粹、私密、可靠**的路线规划工具。
+
+于是，`RoadbookMaker` 的第一个版本，就在无数个深夜的键盘敲击声中诞生了。
+
+### 二、核心理念：把简单和自由还给用户
+
+`RoadbookMaker` 的所有功能都围绕着几个核心原则构建，这也是它与众不同之处：
+
+*   **彻底的零门槛**：无需任何地图厂商的API Key，没有强制的注册登录流程。打开浏览器就能立即开始规划。
+*   **数据完全私有**：默认情况下，你的所有行程数据只保存在你自己的浏览器本地。对于希望数据能跨设备同步的用户，项目也支持通过 Docker 一键自托管到个人服务器，实现数据的完全私有化。
+*   **体验闭环，一站式服务**：规划的最终目的是“出行”。因此，工具无缝集成了**导航**（高德、百度、Google）、**订票**（携程）、**酒店**（Google）和**攻略**（小红书），让你的规划与实际出行无缝衔接。
+
+### 三、快速上手：三分钟，规划你的第一次“出逃”
+
+让我们来看看用 `RoadbookMaker` 规划一次行程有多么简单直观。
+
+1.  **标记你的足迹**
+    在地图上，你可以通过顶部的搜索框寻找目的地，也可以直接按快捷键 `<kbd>A</kbd>` 激活添加模式，在地图上点击即可创建标记点。
+
+2.  **连接成完整路线**
+    有了几个标记点后，按 `<kbd>C</kbd>` 键，在弹窗中选择起点、终点和交通方式（如 🚗 或 🚶），一条清晰的路线便跃然图上。
+
+3.  **为行程注入灵魂**
+    点击任意标记点或路线，右侧会滑出详情面板，这里是丰富你行程的“宝库”：
+    *   **时间规划**：为每个地点设置抵达、离开时间，或为路程设置耗时。
+    *   **一键跳转**：需要导航？一键唤起手机里的高德/百度地图。想订票或酒店？直达携程和Google。想找找当地有什么好吃的？去小红书搜一搜！
+
+4.  **分享你的杰作**
+    规划完成后，通过“导出HTML”功能，你能得到一个**包含所有数据的独立网页文件**。把它发给你的旅伴，他们用任何浏览器打开，就能看到一份与你完全相同的、可交互的动态路书。这比发一堆截图可酷多了。
+
+### 四、背后的一些技术坚持
+
+为了实现上述体验，我在技术选型上做了一些看似“复古”但实际非常有效的决策。
+
+*   **前端：拥抱原生 `Vanilla JS`**
+    我没有选择任何主流框架，而是回归了原生JavaScript和强大的地图库`Leaflet.js`。这带来了极致的轻量化和性能，去除了所有构建步骤，让项目能以最纯粹的形式运行，这也是“完全离线可用”和“导出独立HTML”功能的技术基石。
+
+*   **后端：Go语言带来的部署自由**
+    `RoadbookMaker` 的后端服务是可选的，主要用于在线同步和API代理。选择 Go 语言，是因为它能被编译成**单个无依赖的二进制文件**，这让部署过程变得极其简单，无论是通过Docker还是一条`scp`命令，都能轻松搞定。
+
+*   **关于“无需API Key”**
+    这并非魔法，而是在后端实现了一个**API代理层**。由我的服务器统一去请求百度、天地图等服务，并处理好国内地图独有的坐标系转换问题，再将干净、统一的数据格式返回给前端。这既保证了终端用户的零配置体验，也保障了安全性。
+
+### 五、写在最后
+
+`RoadbookMaker` 是一个源于个人需求、成长于开源社区的项目。它不追求功能的繁复，而是专注于打磨“路线规划”这一核心体验，希望把它做得更简单、更可靠、更尊重用户。
+
+从一行代码到一个被上千人Star的项目，这段旅程充满了挑战和乐趣。如果这个工具解决了你的某个痛点，或者你认同它背后的理念，欢迎在GitHub上给我一个 **Star** ⭐，你的每一个支持，都是我持续更新、不断完善它的最大动力。
+
+谢谢你读到这里。