1. 为什么我选 Leaflet.js EdgeOne Pages MCP 做 520 回忆地图520 送礼物这件事我踩过不少坑。鲜花三天就谢巧克力吃完就忘电子相册翻两页就腻。后来我想明白一件事真正让人记住的礼物是能讲故事的。而故事最天然的载体就是地图——你们第一次见面的咖啡馆、第一次约会的电影院、一起旅行的那座城市这些坐标连起来就是一条只属于你们两个人的时间线。所以这次我做的项目叫《我们的回忆地图》一个用 Leaflet.js 渲染的交互式地图上面钉着若干标记点点开每个标记会弹出照片、日期和一段回忆文字。再埋几个彩蛋——比如在某个经纬度区域连点三下、停留 30 秒触发心形动画、输入 Konami 代码↑↑↓↓←→←→BA弹出秘密相册。整个页面是纯静态的 HTML CSS JS数据放在一个 JSON 文件里不需要后端、不需要数据库。那为什么部署环节我选 EdgeOne Pages MCP因为传统部署流程对临时起意做个小惊喜这件事太重了买服务器、配 Nginx、传文件、绑域名……等你搞完520 都过了。EdgeOne Pages 是腾讯云提供的静态站点托管服务而它的 MCP Server 可以直接挂到 CodeBuddy 里我用自然语言说一句帮我把这个项目部署上去它就把本地文件推上去了返回一个公网可访问的 URL。整个过程从写完代码到拿到链接实测下来不到两分钟。这篇文章面向的是想在 520 给伴侣送点不一样东西的开发者——你不需要会运维只要会写 HTML 和一点 JS 就行。我会把 MCP 配置片段、地图标记数据模板、部署后怎么验证链接可用全部给到可复制的地步。Leaflet.js 这个库本身很轻压缩后约 42KBAPI 也简单配合静态 JSON 数据非常适合这种一次性但要有质感的小项目。顺便说一句如果你在开发过程中需要调用大模型来帮你生成回忆文案、润色情话或者调试 JS 逻辑可以用 TaoToken 这类聚合平台统一管理 API Key省得在多个平台之间来回切换。这个后面我会在配置章节具体讲。2. 前置准备CodeBuddy 装 MCP、TaoToken 拿 Key、项目目录怎么摆动手之前先把三件事准备好编辑器插件、MCP 配置、API Key。这三样缺一个后面都会卡住。第一件VS Code CodeBuddy 插件。在 VS Code 扩展市场搜腾讯云代码助手 CodeBuddy装上登录后左侧会出现对话窗口。CodeBuddy 支持 Craft 模式也就是能读写文件、执行命令的 Agent 模式我们后面生成 HTML、写 JS、调 MCP 都靠它。第二件把 EdgeOne Pages MCP Server 挂进 CodeBuddy。进入 CodeBuddy 对话窗口找到 MCP 选项点配置 MCP Server会打开一个Craft_mcp_settings.json文件。在里面加入下面这段配置{ mcpServers: { edgeone-pages-mcp-server: { command: npx, args: [edgeone-pages-mcp] } } }保存后回到 MCP 界面能看到edgeone-pages-mcp-server状态变成已连接就说明挂载成功了。这里有个坑我先说npx需要本机有 Node.js 环境建议 18 以上如果你没装 Node这一步会静默失败MCP 列表里看不到这个 server。装完 Node 记得重启 VS Code。第三件TaoToken 的 API Key。为什么需要它因为我在做这个项目时回忆文案、情话、甚至部分 JS 逻辑的调试都是让大模型帮我生成的。与其在每个平台单独注册不如用一个聚合入口。TaoToken 的接入方式很标准Base URL 填https://taotoken.net/apiKey 在控制台的 API Keys 页面创建。如果你用的是 Claude Code 这类工具配置里需要同时给全三件套Base URL、API Key、Model ID缺一个都会报 401。具体到配置文件以 Claude Code 的settings.json为例路径通常在~/.claude/settings.json内容长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }如果你用的是 Codex对应的是auth.json字段名不一样但逻辑相同。这里提醒一句Model ID 一定要填对填错了会报reading choices之类的解析错误后面排障章节我会细讲。第四件项目目录结构。在本地建一个文件夹比如love-memory-map/结构如下love-memory-map/ ├── index.html ├── style.css ├── script.js ├── data.json ├── images/ │ ├── photo1.jpg │ └── photo2.jpg └── audio/ (可选背景音乐) └── song.mp3data.json是核心所有标记点的经纬度、照片路径、回忆文字都放这里。这样你以后想加一个新地点只改 JSON 就行不用动 JS。目录摆好环境就齐了。3. 可复制配置MCP settings、data.json 标记模板、Leaflet 初始化代码这一节是全文最干货的部分我把三个关键配置文件完整给出来你直接复制改改就能用。3.1 MCP 配置再贴一次方便对照Craft_mcp_settings.json里除了 EdgeOne Pages如果你还想让 CodeBuddy 调用大模型辅助写文案可以再加一个 TaoToken 的 server如果你的 CodeBuddy 版本支持 HTTP 类型 MCP{ mcpServers: { edgeone-pages-mcp-server: { command: npx, args: [edgeone-pages-mcp] } } }注意EdgeOne Pages MCP 在部署前需要你在腾讯云 EdgeOne 控制台创建一个 API Key否则部署时会返回鉴权失败。这个 Key 是 EdgeOne 自己的和 TaoToken 的 Key 不是一回事别搞混。3.2 data.json 标记数据模板这是整个地图的灵魂文件。每个标记点是一个对象包含坐标、标题、日期、照片、回忆文字{ markers: [ { lat: 39.9042, lng: 116.4074, title: 第一次见面, date: 2023-05-20, photo: images/photo1.jpg, memory: 那天你穿了一件白色的衬衫站在咖啡馆门口我紧张得差点把咖啡洒了。 }, { lat: 31.2304, lng: 121.4737, title: 第一次约会, date: 2023-06-18, photo: images/photo2.jpg, memory: 外滩的夜景很美但我觉得你比夜景好看。 }, { lat: 24.8801, lng: 102.8329, title: 一起旅行, date: 2024-01-01, photo: images/photo3.jpg, memory: 在滇池边喂海鸥你说以后每年都要一起看一次海鸥。 } ], easterEgg: { lat: 35.5, lng: 115.5, message: 你找到了隐藏的彩蛋这里是我们故事开始的地方。 } }经纬度怎么查打开高德或百度地图右键点地点选复制坐标或者用在线经纬度查询工具。注意 Leaflet 默认用 WGS84 坐标系国内地图多是 GCJ02会有几百米偏移。如果你对精度要求高需要做坐标转换如果只是示意直接用问题不大。3.3 Leaflet 初始化 标记渲染代码script.js里核心就这几段。先初始化地图const map L.map(map).setView([35.0, 110.0], 5); L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, { attribution: copy; OpenStreetMap contributors, maxZoom: 18 }).addTo(map);然后读取 JSON 并打点fetch(data.json) .then(res res.json()) .then(data { data.markers.forEach(m { const marker L.marker([m.lat, m.lng]).addTo(map); marker.bindPopup( div classpopup h3${m.title}/h3 p classdate${m.date}/p img src${m.photo} alt${m.title} stylewidth:200px;border-radius:8px; p${m.memory}/p /div ); }); }) .catch(err console.error(加载标记失败:, err));index.html里记得引入 Leaflet 的 CSS 和 JSlink relstylesheet hrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css script srchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js/script div idmap styleheight:600px;/div这里有个细节#map容器必须显式设置高度否则地图不显示Leaflet 的经典坑。我一般写在 CSS 里#map { height: 100vh; }。3.4 彩蛋逻辑Konami 代码const konami [ArrowUp,ArrowUp,ArrowDown,ArrowDown,ArrowLeft,ArrowRight,ArrowLeft,ArrowRight,b,a]; let idx 0; document.addEventListener(keydown, e { if (e.key konami[idx]) { idx; if (idx konami.length) { document.getElementById(secretAlbum).style.display block; idx 0; } } else { idx 0; } });这三段配置拼起来一个能跑的地图就成型了。接下来就是把它推上线。4. 部署与验证用 MCP 一句话推上 EdgeOne Pages 并确认链接可用代码写完后在 CodeBuddy 对话窗口里直接说帮我把当前项目通过 edgeone-pages-mcp-server 部署到 EdgeOne PagesCodeBuddy 会调用 MCP 的deploy_html工具把项目文件打包上传。等十几秒它会返回一个公网 URL格式类似https://mcp.edgeone.site/share/xxxxx。这个链接就是你的回忆地图线上地址可以直接发给对方。部署后必须做的三件验证第一打开链接看地图是否渲染。如果页面白屏但控制台没报错八成是#map没设高度。如果报L is not defined说明 Leaflet 的 JS 没加载成功检查 CDN 链接是否被网络拦截。第二点开每个标记看弹窗。照片不显示通常是路径问题——data.json里的images/photo1.jpg是相对路径要确保图片真的在部署包里。EdgeOne Pages 部署的是你当前目录如果图片在子文件夹路径要对得上。第三测试彩蛋触发。Konami 代码需要页面获得焦点手机上没法测得用电脑。停留 30 秒的心形动画可以用setTimeout验证。我实测下来第一次部署最容易出问题的是图片没打包进去。因为 MCP 上传的是当前工作目录如果你的图片放在项目外面就不会被带上。解决办法是把所有资源都放进项目文件夹用相对路径引用。另外EdgeOne Pages 每次部署会生成一个新链接旧链接仍然可访问。所以你可以先部署一版测试确认没问题后再部署正式版把正式链接发出去。如果你在部署过程中遇到鉴权失败回到 EdgeOne 控制台确认 API Key 是否创建、是否过期。这个 Key 和 TaoToken 的 Key 是两套体系别填错地方。5. 常见报错排查401、local proxy failed、reading choices、OAuth 怎么解这一节我把实际踩过的坑列出来对照报错找原因。报错一401 Unauthorized。这个最常见出现在调用大模型 API 时。原因通常是 API Key 填错、过期或者 Base URL 和 Key 不匹配。如果你用的是 TaoToken确认 Base URL 是https://taotoken.net/apiKey 是从控制台 API Keys 页面复制的完整字符串。注意有些平台 Key 带前缀sk-有些没有复制时别漏字符。还有一种情况你把 EdgeOne 的 Key 填到了大模型配置里两者混用必然 401。报错二local proxy failed。这个报错一般出现在 MCP 或本地代理层。意思是 CodeBuddy 尝试连接本地某个服务失败。排查顺序先确认npx edgeone-pages-mcp能不能在终端手动跑起来再确认 Node 版本是否 ≥18最后看Craft_mcp_settings.json的 JSON 格式有没有语法错误比如多了个逗号。JSON 格式错误会导致 MCP 静默不加载。报错三reading choices。这个报错通常和模型返回格式有关。当你配置的 Model ID 不被支持或者返回体结构不符合预期时客户端解析choices字段就会失败。解决办法是确认 Model ID 拼写正确比如claude-sonnet-4-20250514不要写成claude-sonnet-4。如果你在 Codex 的auth.json里配置字段名是model不是ANTHROPIC_MODEL别照搬 Claude Code 的写法。报错四OAuth 相关错误。如果你用 Claude Code 接入可能会遇到 OAuth 登录失败。这通常是因为环境变量里同时存在 OAuth token 和 API Key两者冲突。解决方法是清掉 OAuth 相关配置只用 API Key 方式。在settings.json里确保只有ANTHROPIC_API_KEY没有ANTHROPIC_AUTH_TOKEN之类的字段。报错五地图标记不显示但无报错。这个不是网络错误是数据问题。检查data.json的lat/lng是不是数字类型如果写成字符串39.9042Leaflet 可能不认。另外确认fetch(data.json)的路径正确部署后 JSON 文件要在根目录。报错六部署成功但链接打不开。先确认链接是不是完整复制了有时候末尾字符被截断。如果链接正确但 404可能是部署时文件没上传全重新部署一次。EdgeOne Pages 的分享链接有时效性长期访问建议绑定自定义域名。排查这类问题的通用思路是先看控制台报错再定位是配置层、网络层还是数据层。配置层查 JSON 格式和字段名网络层查 Key 和 URL数据层查文件路径和类型。三层分开查比盲目改代码快得多。6. 把地图发出去之前我建议你再做这几件事项目部署完、链接能打开其实只是完成了 70%。剩下 30% 决定这个礼物是还行还是哇。第一把默认的 OpenStreetMap 瓦片换成更好看的样式。OSM 默认样式偏工程感你可以换成 CartoDB 的浅色底图或者用高德瓦片注意坐标系。一行L.tileLayer的事但视觉质感提升明显。第二给标记点加自定义图标。默认的蓝色水滴太普通用L.icon换成心形或相机图标配合你们的照片做缩略图点开前就有惊喜感。第三加背景音乐但要给关闭按钮。自动播放会被浏览器拦截所以要么让用户点一下才播要么在页面角落放个音乐开关。别做那种一打开就强制播放的体验很差。第四彩蛋别埋太深。我见过有人把彩蛋藏在需要输入特定日期才能触发的地方结果对方根本没发现。彩蛋的意义是被找到的惊喜不是永远找不到的谜题。可以在页面底部加一句模糊的提示比如试试输入那个特殊的日子。第五准备一个备用链接。EdgeOne Pages 的分享链接如果哪天失效了你还有本地文件可以重新部署。建议把整个项目文件夹备份一份图片单独存云盘。最后说个我自己的经验这类项目的价值不在于技术多复杂而在于专属感。地图上的每一个坐标、每一张照片、每一句文案都是你们独有的。所以别偷懒用模板文案花半小时把data.json里的memory字段认真写一写效果完全不一样。如果你在开发过程中需要大模型帮你润色文案、生成情话或者调试 JS 逻辑可以用 TaoToken 统一管理 API 调用Base URL 填https://taotoken.net/apiKey 在控制台创建。需要长期做编码和 Agent 类任务的可以看看 Coding Plan只是想验证模型效果的直接用模型对话就行。接入文档在官网都能找到配置三件套Base URL Key Model ID给全就不会报错。项目做完链接发出去剩下的就交给对方去发现吧。