1. 为什么要在 VS Code 里折腾 mcp-server 和高德地图如果你最近在折腾 AI 编程助手大概率听过 MCP 这个词。MCP 全称 Model Context Protocol说白了就是给大模型装上一套「标准插座」——以前模型只能靠你手动复制粘贴数据现在它能通过 mcp-server 主动去调用外部工具比如查地图、读文件、跑命令。而高德地图 MCP 就是其中特别实用的一类它把地理编码、路线规划、周边搜索、天气查询这些 Web API 封装成模型能直接调用的工具。那为什么选 VS Code 作为载体因为 VS Code 1.99 之后原生支持在.vscode/mcp.json里声明 MCP Server配合 GitHub Copilot 的 Agent 模式你只需要写一句自然语言提示词模型就会自己去调高德地图的接口把经纬度、路线、酒店、门票信息拼成一份完整的旅游攻略。整个过程不用你写一行调用代码特别适合想快速验证 MCP 链路的人。这篇文章要交付的东西很明确一份可复制的mcp.json配置骨架、TaoToken 统一 Key 的接入方式、以及一次「生成恩施两天一夜攻略」的完整验证动作。适合谁看有 VS Code、装了 Copilot、想跑通本地 MCP 调用流程的开发者。环境准备到出结果我尽量把每一步都写清楚你跟着做就行。2. 前置准备TaoToken 统一 Key 与高德 API Key在动手配 mcp-server 之前有两类 Key 要先准备好很多人卡在这一步。第一类是高德地图的 API Key。你需要去高德开放平台注册账号创建一个「Web 服务」类型的应用拿到AMAP_MAPS_API_KEY。注意一定要选 Web 服务不是 Web 端 JS API否则 MCP Server 调不通。这个 Key 后面会写进mcp.json的env字段里。第二类是模型侧的 Key。如果你用的是 GitHub Copilot 自带的模型可以跳过但如果你想用更灵活的模型接入方式或者团队里统一管理 Key我建议走 TaoToken 这套。它的好处是一个 Key 就能对接多种模型不用在多个平台之间来回切换配置。你可以先到官网看看接入方式官网入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content拿到 Key 之后在控制台里可以创建和管理 API Keys地址是API Keys 管理https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content如果你打算长期用 MCP 做编码和 Agent 任务Coding Plan 会更划算适合高频调用场景Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 的基础地址是https://taotoken.net/api这个不带 UTM配置的时候直接用。环境要求方面Node.js 版本要大于等于 20.0因为高德地图 MCP Server 是通过npx拉起的NPX 需要能正常访问 npm 源。如果你本地 npm 镜像有问题先切回官方源或者可用的镜像再继续。3. 可复制的 mcp.json 配置骨架环境准备好之后新建一个空项目目录然后在项目根目录下创建.vscode/mcp.json。这个文件是 VS Code 识别 MCP Server 的关键路径不能错必须是.vscode目录下。下面是我实测可用的配置骨架你可以直接复制把路径和 Key 换成自己的{ servers: { filesystem: { command: npx, args: [ -y, modelcontextprotocol/server-filesystem, /Users/yourname/Documents/code, /Users/yourname/Documents/devlopment ] }, amap-maps: { command: npx, args: [ -y, amap/amap-maps-mcp-server ], env: { AMAP_MAPS_API_KEY: 你在高德开放平台申请的 Web 服务 Key } } } }这里有两个 Server。filesystem负责让模型读写你指定的本地目录注意args里最后两个路径是你要授权给模型访问的文件夹换成你自己的实际路径别照抄我的。amap-maps就是高德地图 MCP Server通过npx -y amap/amap-maps-mcp-server拉起Key 放在env里。配置里几个容易踩的点我提前说command必须是npx不要写成npx.cmd或者绝对路径除非你本地环境特殊args数组里的-y不能省否则 npx 会卡在交互确认AMAP_MAPS_API_KEY的 Key 类型必须是 Web 服务用错类型会返回权限错误。项目结构大概长这样方便你对照. ├── README.md ├── index.html └── .vscode/ └── mcp.jsonindex.html是后面生成攻略的落地页面现在可以先空着。4. 在 VS Code 里跑通一次请求并验证结果配置写完之后重启 VS Code或者按CmdShiftPWindows 是CtrlShiftP打开命令面板执行MCP: List Servers确认amap-maps和filesystem都处于已连接状态。如果显示未连接先看下一节的排障部分。接下来打开 GitHub Copilot 对话框把模式切到Agent模型选 Claude 3.5 Sonnet或者你通过 TaoToken 接入的其他模型。Agent 模式才会主动调用 MCP 工具普通对话模式不会。然后输入提示词。我用的验证提示词是这样的在 gaode 目录中帮我用 HTML Tailwind CSS JS 和高德地图 MCP Server 生成一份恩施两天一夜的游玩攻略。要求第一天 5 月 2 号上午 9 点搭乘动车 到恩施去土司城和女儿城游玩并住宿第二天去恩施大峡谷游玩完毕回武汉。 请推荐合适的酒店信息我有旅游年卡查询下门票是否免费以及通勤方式。发送之后你会看到 Copilot 开始调用amap-maps的工具依次执行地理编码、路线规划、周边搜索、天气查询。比如它会把「恩施土司城」转成经纬度再查周边酒店再算从恩施站到土司城的驾车路线。整个过程在对话框里能看到工具调用记录。等它跑完会在gaode目录下生成一个index.html。用浏览器打开应该能看到一份带地图、路线、酒店推荐和门票信息的攻略页面。如果页面不够美观你可以继续追问「页面不够美观请继续美化」模型会接着改。验证成功的标志有三个一是mcp.json里两个 Server 都显示已连接二是对话框里能看到高德地图工具被实际调用三是生成的 HTML 能正常渲染出地图和攻略内容。三个都满足说明你的 mcp-server 链路已经跑通了。5. 本篇常见错误排查跑不通的时候大部分问题集中在下面几类我按出现频率排一下。npx 拉不起 Server报网络或 404 错误。这是最常见的。原因是 npm 源访问不稳定或者 Node 版本低于 20。先执行node -v确认版本再执行npx -y amap/amap-maps-mcp-server手动跑一次看能不能拉起来。如果卡住切换 npm 镜像源后重试。高德接口返回INVALID_USER_KEY或权限错误。九成是 Key 类型不对。高德开放平台创建应用时要选「Web 服务」不是「Web 端」。另外检查 Key 有没有被限制 IP 或域名MCP Server 是服务端调用IP 白名单如果开了要放行。Copilot 不调用 MCP 工具只在那聊天。检查两点一是对话框模式必须是 Agent不是 Ask二是mcp.json保存后要重启 VS Code 让配置生效。有时候 Server 显示已连接但工具没注册重启一次就好。filesystem Server 报路径无权限。args里的路径必须是真实存在的绝对路径且你有读写权限。路径写错或者目录不存在Server 启动就会失败。建议先用一个简单的测试目录验证。生成的 HTML 打开是空白。多半是高德 JS API 的 Key 没配或者地图容器初始化失败。注意 MCP Server 用的是 Web 服务 Key而页面里渲染地图用的是 Web 端 JS API Key这两个不是同一个需要在 HTML 里单独填 JS API 的 Key。如果排查完还是不通可以去接入文档里对照配置项接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content6. 把链路用起来从验证到日常跑通一次之后这套配置就能复用到很多场景。比如你想让模型帮你规划出差路线、查某个商圈周边的餐饮、或者根据天气调整行程只要改提示词就行MCP Server 不用动。我试过把filesystem的授权目录换成项目根目录让模型直接读本地数据再结合高德地图做分析效率比手动查高不少。如果你更习惯在终端里跟模型对话可以走模型对话入口把同样的 MCP 能力接进去模型对话https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content长期做编码和 Agent 任务的话Coding Plan 的额度模型更适合高频调用不用每次单独算Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content最后提醒一句mcp.json里含有 API Key千万别提交到代码仓库。建议把.vscode/mcp.json加进.gitignore或者用环境变量注入的方式管理 Key。高德那边也要注意调用频率限制别在循环里疯狂请求。链路跑通只是开始把它变成你日常工具流的一部分才算真正用起来。