【保姆级】用 Trae + 高德 MCP 配置老幼友好型路线导航 - 文章 - 开发者社区

picture.image

本实践课程为哈工大在读硕士，自媒体视频博主，AI 入门分享者温鑫（星星）编写

picture.image

高德APP界面

picture.image

高德打车功能

你是否有这样的经历？🤔

教了爸妈好几遍怎么用手机打车，他们还是找不到在哪里输入目的地，页面字小看不清、功能错综复杂...
给小孩子手机导航，结果他们被五花八门的按钮吸引，一不小心就变成“熊孩子”了
长辈们看着密密麻麻的小字和复杂的界面，直接放弃：“还是你帮我叫车吧...”

这些都是真实存在的痛点！ 我们年轻人觉得简单的操作，对于长辈和小孩来说简直就像是在解数学题一样困难。

那么，如果有一个超级简单的页面，只需要输入起点和终点，一键就能规划路线，甚至直接跳转到打车界面，是不是就方便多了？

本教程主要是教大家用 Trae 来配置 MCP 、体验 MCP 的魅力 、最后涉及高德 MCP 路线规划的 demo 演示。

Trae ，复制链接🔽下载，跟学吧

https://www.trae.com.cn/?utm\_source=school&utm\_medium=acc&utm\_campaign=zhishiku

picture.image

什么是 MCP（通俗）？

什么是 MCP？ MCP （Model Context Protocol，模型上下文协议）简单来说就是让 AI 拥有了**“手和脚”** 去调用一些其他工具！

想象一下，以前的 AI 就像是一个智慧的大脑，而有了 MCP 后，它就像是变身为机器人，可以帮你做实际的事情了！MCP 就是 AI 的“手和脚”，让它能够操作其他软件和服务。

这时可能也会有人问，那之前的 Trae 呀等等智能体也能调用其他的一些东西呀？这个 MCP 又有什么区别或者优势吗？MCP 相当于统一了接口，类似于 USB 接口， 以前我们需要针对于不同的工具分别做配置，比如电视机的插口是其他的口，洗衣机也是其他的口，每次都需要做适配...现在就相当于给接口进行统一，都换成 USB 接口，轻松配置！

picture.image

MCP 图片解释

OK我们废话不多说，直接开始具体操作！全教程均小白化+保姆级，请放心食用！

picture.image

登录授权高德地图

MCP（免费使用）

首先，我们需要获取高德地图的开发权限（完全免费 ，而且超级简单）

1. 打开高德开放平台官网：https://lbs.amap.com/

2. 最好选择支付宝登录或者高德 APP 扫码登录，后续会二次验证授权。

picture.image

高德平台官网

3. 往下滑，翻到最底下，找到“成为开发者”，点击“前往控制台”去注册和授权为开发者：

picture.image

4. 授权成功后，点击应用管理-我的应用-创建新应用，然后进行创建：

picture.image

小贴士：这一步就像是在给 AI 申请一个"通行证"，有了这个通行证，AI 才能调用高德地图的功能哦！

picture.image

Trae 中配置高德 MCP

现在，我们需要告诉 Trae 如何使用这个“通行证”：

1. 打开 Trae 新建一个文件夹后，点击“设置”-“MCP”-“手动配置”：

picture.image

2. 目前 Trae 的 MCP 市场中还没有高德，需要我们手动配置，点击“原始配置”，把接下来的代码直接复制到 mcp.json 文件中：

  
{     
"mcpServers": {          
"amap-maps": {  
"command": "npx",  
"args": [  
"-y",  
"@amap/amap-maps-mcp-server"  
            ],  
"env": {  
"AMAP_MAPS_API_KEY": "这里复制粘贴你刚刚在高德申请的Key！"  
            }  
        }      
     }  
}

picture.image

小贴士：这段代码就像是在告诉 AI ："嘿，这是高德地图的钥匙（key），你可以用它来开启高德地图的功能！"

3. 然后过程中，我们发现还是报错了（小红点 ，还是不能用），这时候该怎么办呢？当然是直接问 Trae 呀！！（有问题就找 AI ）

picture.image

4. 经过 AI 的分析，发现可能是没有安装 node.js ，具体是什么，咱也不懂咱也不知道，那就按照它说的来吧！让它教我一步步安装：

picture.image

5. 然后验证一下安装是否成功（不需要懂，照着步骤来就行！ ）：

a. 打开命令提示符（按Win+R ，输入cmd ，按回车）

b. 输入以下命令检查 Node.js 是否安装成功：

  
node -v

c. 输入以下命令检查 npm 是否安装成功：

  
npm -v

如果显示版本号，说明安装成功

d. 安装高德 MCP 服务器包，运行以下命令：

  
npm install -g @amap/amap-maps-mcp-server

等待安装完成！

小贴士：这一步相当于给 AI 装了一个"翻译器"，这样 AI 才能听懂高德地图的"语言"！

6. 安装完成后，重新打开 Trae 就可以看到小绿点 啦，配置成功！

picture.image

测试一下效果

使用Trae，选择**@智能体 MCP（Builder with MCP）** ，可以看到我们刚刚配置的高德 MCP**（amap-maps）** ，然后告诉起点和终点，让给出规划方案，进行验证。

picture.image

2. 效果还不错，高德 MCP 已经自动的获取位置的经纬度信息，并且进行规划了！到这边，一个高德出行 MCP 就算是配置成功啦！ 一个出行规划 Agent 助手也顺利配置成功！🎉

picture.image

进阶优化效果（输出网页）

我在想，既然已经配置了高德 MCP ，而且还有 Trae 工具在手，何不再进一步 ，做个长辈/小孩友好的路线规划网页呢？反正 Trae 也可以根据我的需求生成 html 网页，自动的排版、优化、布局、设计，为什么不能再优化完善一下呢？

1. 那就果断干！把 UI 设计需求简单描述给 Trae，把工作流简单描述给 Trae，它帮我生成**“页面 UI 设计”** “长辈友好工作流” 的 Markdown 文档，记录了一些提示词的细节 （我附在后面，可直接复制）：

picture.image

  
根据上面内容生成一个 HTML 动态网页（长辈友好的网页），以下为长辈友好的网页设计要求：  
  
1. 简单明了的线路展示  
- 将线路清晰展示，点击后直接跳转到高德地图查看详细信息  
- 每条线路用大字体标注起点和终点，避免复杂描述  
2. 清晰的出行选择  
- 提供"打车"和"公交车"两个大按钮选项  
- 按钮要足够大，便于点击，且有明显的视觉区分  
3. 长辈友好的视觉设计  
- 使用超大字体（至少18-24px基础字号）  
- 选择高对比度配色（深色文字配浅色背景）  
- 界面极简，避免复杂装饰和不必要的元素  
- 确保在手机上也能轻松操作（按钮间距充足）  
4. 重点突出设计  
- 使用超大字体显示关键信息（如目的地、距离）  
- 重要按钮和信息使用更大的尺寸，与次要信息形成明显对比  
- 使用图标配合文字，增强理解  
5. 舒适的视觉效果  
- 使用柔和的高亮色，避免过于鲜艳的色彩  
- 色彩透明度渐变要温和，不要使用闪烁或快速变化的效果  
- 不同颜色之间保持独立，不要互相混合渐变  
6. 简单的页面交互  
- 滚动效果要平滑缓慢，避免突然变化  
- 减少滚动深度，重要信息尽量放在首屏  
- 点击反馈要明显（如按钮变色）  
7. 数据展示简化  
- 如需展示数据，使用简单直观的图表  
- 图表样式与整体设计保持一致  
- 避免复杂的数据交互  
8. 技术实现要求  
- 使用Framer Motion提供平滑过渡效果（通过CDN引入）  
- 使用HTML5和TailwindCSS构建界面（通过CDN引入）  
- 使用必要的JavaScript实现简单交互  
9. 清晰的视觉引导  
- 使用Material Icons等专业图标库提供直观的视觉提示  
- 图标要足够大且意义明确（如电话图标、地图图标）  
- 避免使用emoji作为主要图标  
10. 内容完整性  
- 确保所有必要信息都清晰展示  
- 使用简单直白的语言描述功能  
- 避免使用专业术语或网络流行语  
11. 错误处理友好  
- 出错时提供清晰的提示和简单的解决方案  
- 避免技术性错误信息，使用通俗易懂的语言

picture.image

  
# 长辈出行助手开发流程  
  
这是一个为长辈设计的地图工具，帮助他们轻松找到出行路线并一键打开高德地图。每完成一项任务，请在前面标记"✓ 已完成"。  
  
## 基本功能步骤  
  
1. 获取长辈的出行信息  
   - 需要长辈提供清晰的出发地点和目的地  
   - 尽量使用完整地址，如"北京协和医院（东单院区）"、"北京天安门广场"  
2. 使用高德地图服务(MCP)将地址转换为经纬度坐标  
3. 生成打车链接  
   - 利用高德MCP的打车功能(maps_schema_take_taxi)  
   - 将起点和终点的经纬度传入，生成可直接打开高德打车的链接  
4. 添加公交出行选项  
   - 为长辈提供公共交通导航的选择  
   - 生成一键打开公交路线的链接  
5. 设计适合长辈使用的界面，根据“页面UI设计.md”设计html页面，确保按钮大小适中，文字清晰易读

2. 然后基于它写的工作流，直接拖到对话框里面，调用 MCP ，进行提问：

picture.image