【保姆级】用 Trae + 高德 MCP 配置老幼友好型路线导航
资料来源：火山引擎-开发者社区
本实践课程为哈工大在读硕士，自媒体视频博主，AI 入门分享者温鑫（星星）编写
高德 APP 界面
高德打车功能
你是否有这样的经历？🤔
教了爸妈好几遍怎么用手机打车，他们还是找不到在哪里输入目的地，页面字小看不清、功能错综复杂...
给小孩子手机导航，结果他们被五花八门的按钮吸引，一不小心就变成“熊孩子”了
长辈们看着密密麻麻的小字和复杂的界面，直接放弃：“还是你帮我叫车吧...”
这些都是真实存在的痛点！ 我们年轻人觉得简单的操作，对于长辈和小孩来说简直就像是在解数学题一样困难。
那么，如果有一个超级简单的页面，只需要输入起点和终点，一键就能规划路线，甚至直接跳转到打车界面，是不是就方便多了？
本教程主要是教大家用 Trae 来配置 MCP 、体验 MCP 的魅力 、最后涉及高德 MCP 路线规划的 demo 演示。
Trae ，复制链接🔽下载，跟学吧
https://www.trae.com.cn/?utm\_source=school&utm\_medium=acc&utm\_campaign=zhishiku
什么是 MCP（通俗）？
什么是 MCP？
MCP （Model Context Protocol，模型上下文协议）简单来说就是让 AI 拥有了**“手和脚”** 去调用一些其他工具！
想象一下，以前的 AI 就像是一个智慧的大脑，而有了 MCP 后，它就像是变身为机器人，可以帮你做实际的事情了！MCP 就是 AI 的“手和脚”，让它能够操作其他软件和服务。
这时可能也会有人问，那之前的 Trae 呀等等智能体也能调用其他的一些东西呀？这个 MCP 又有什么区别或者优势吗？MCP 相当于统一了接口，类似于 USB 接口， 以前我们需要针对于不同的工具分别做配置，比如电视机的插口是其他的口，洗衣机也是其他的口，每次都需要做适配...现在就相当于给接口进行统一，都换成 USB 接口，轻松配置！
MCP 图片解释
OK 我们废话不多说，直接开始具体操作！全教程均小白化+保姆级，请放心食用！
登录授权高德地图
MCP（免费使用）
首先，我们需要获取高德地图的开发权限（完全免费 ，而且超级简单）
1. 打开高德开放平台官网：https://lbs.amap.com/
2.最好选择支付宝登录或者高德 APP 扫码登录，后续会二次验证授权。
高德平台官网
3.往下滑，翻到最底下，找到“成为开发者”，点击“前往控制台”去注册和授权为开发者：
4.授权成功后，点击应用管理-我的应用-创建新应用，然后进行创建：
小贴士：这一步就像是在给 AI 申请一个"通行证"，有了这个通行证，AI 才能调用高德地图的功能哦！
Trae 中配置高德 MCP
现在，我们需要告诉 Trae 如何使用这个“通行证”：
1.打开 Trae 新建一个文件夹后，点击“设置”-“MCP”-“手动配置”：
2.目前 Trae 的 MCP 市场中还没有高德，需要我们手动配置，点击“原始配置”，把接下来的代码直接复制到 mcp.json 文件中：
小贴士：这段代码就像是在告诉 AI ："嘿，这是高德地图的钥匙（key），你可以用它来开启高德地图的功能！"
3.然后过程中，我们发现还是报错了（小红点 ，还是不能用），这时候该怎么办呢？当然是直接问 Trae 呀！！（有问题就找 AI ）
4.经过 AI 的分析，发现可能是没有安装 node.js ，具体是什么，咱也不懂咱也不知道，那就按照它说的来吧！让它教我一步步安装：
5.然后验证一下安装是否成功（不需要懂，照着步骤来就行！ ）：
a. 打开命令提示符（按 Win+R ，输入 cmd ，按回车）
b. 输入以下命令检查 Node.js 是否安装成功：
c. 输入以下命令检查 npm 是否安装成功：
如果显示版本号，说明安装成功
d. 安装高德 MCP 服务器包，运行以下命令：
等待安装完成！
小贴士：这一步相当于给 AI 装了一个"翻译器"，这样 AI 才能听懂高德地图的"语言"！
6.安装完成后，重新打开 Trae 就可以看到小绿点 啦，配置成功！
测试一下效果
1.使用 Trae，选择**@智能体 MCP（Builder with MCP）** ，可以看到我们刚刚配置的高德 MCP**（amap-maps）** ，然后告诉起点和终点，让给出规划方案，进行验证。
2.效果还不错，高德 MCP 已经自动的获取位置的经纬度信息，并且进行规划了！到这边，一个高德出行 MCP 就算是配置成功啦！ 一个出行规划 Agent 助手也顺利配置成功！🎉
进阶优化效果（输出网页）
我在想，既然已经配置了高德 MCP ，而且还有 Trae 工具在手，何不再进一步 ，做个长辈/小孩友好的路线规划网页呢？反正 Trae 也可以根据我的需求生成 html 网页，自动的排版、优化、布局、设计，为什么不能再优化完善一下呢？
1.那就果断干！把 UI 设计需求简单描述给 Trae，把工作流简单描述给 Trae，它帮我生成**“页面 UI 设计”** “长辈友好工作流” 的 Markdown 文档，记录了一些提示词的细节 （我附在后面，可直接复制）：
2.然后基于它写的工作流，直接拖到对话框里面，调用 MCP ，进行提问：
3.点开网页看看吧，页面整体简约整洁 ，去除了无关信息，只保留起点和终点、出行方式信息，非常有助于长辈和小孩。
Trae 生成的网页
4.点击“打车前往”，可以跳转到高德打车的界面，可选走路和打车、公交，地理位置信息正确，说明 MCP 调取正确！
5.此外，还可以分享到手机 ，更便于长辈和小孩使用手机进行交互：
效果完成，快来配置自己的 MCP 智能体呀！让 AI Agent 有了“手”和“脚”去做事 情！
端午出行小助手 (*)
既然高德 MCP 已经配置好，且可以通过我的简单需求就直接生成长辈/小孩友好的网页，马上面临端午假期 ！有没有也要出行的小伙伴，端午去哪里人少 ，以及长辈/小孩如何利用**“智能规划小助手”** 来完成路线的规划和导航？
1.提端午出行需求 ，并且开启联网功能 ，Trae 会调用高德 MCP 功能
2.高德 MCP 能力获取每个景点的信息
3.工具调用结束，生成可视化网页
4.来看看网页效果吧！
自己配置的功能直接输出网页，并且配色、布局皆自动化，输出长辈/小孩友好的网页 ，清晰明了的展示了几条附近旅游路线，页面特点为：
长辈友好设计 ：采用了大字体、高对比度配色、简洁布局 ，符合长辈友好的设计规范
错峰出行建议 ：提供了端午节期间错峰出行的具体建议 ，帮助避开人流高峰
多样化路线 ：包含了 5 条不同类型的旅游路线，满足不同需求，且每个板块右上角展示不同景点的标签类型 （如：自然风光、适合拍照 等）
便捷导航功能 ：每条路线都提供了**"开车去"和"公交去"两种导航方式** ，点击即可跳转到高德地图导航
实用出行提示 ：包含了天气提醒、健康安全 提示等实用信息
每条路线都提供了详细的距离、时间、特色描述和导航按钮（醒目显眼） ，方便长辈和小孩选择最适合的旅游目的地。祝大家端午节假期愉快！
总结：AI 有了“手脚”，生活更美好！
通过这个教程，我们成功地：
● 使用 Trae 工具配置了高德地图 MCP ，让 AI 拥有了调用高德地图的能力
● 创建了一个超级简单的路线规划网页，专为长辈和小孩设计
● 实现了一键打开高德打车/公交的功能，大大简化了操作流程
这就是 MCP 的魅力所在！它让 AI 不再只是一个会聊天的工具，而是让 AI Agent 有了"手"和"脚"去做事情，能够真正帮助我们解决实际问题的助手。父母再也不用为打不到车而烦恼，孩子也能安全地使用导航功能~
快来配置自己的 MCP 智能体吧！🤖🤗
还未添加个人签名 2022-01-25 加入
还未添加个人简介
评论