当Trae遇上高德MCP：一次国庆武汉之旅的AI技术实践
🌟 Hello，我是摘星！ 🌈 在彩虹般绚烂的技术栈中，我是那个永不停歇的色彩收集者。 🦋 每一个优化都是我培育的花朵，每一个特性都是我放飞的蝴蝶。 🔬 每一次代码审查都是我的显微镜观察，每一次重构都是我的化学实验。 🎵 在编程的交响乐中，我既是指挥家也是演奏者。让我们一起，在技术的音乐厅里，奏响属于程序员的华美乐章。
摘要
在这个AI技术飞速发展的时代，我有幸体验了一次令人惊叹的技术实践------使用Trae AI IDE结合高德MCP 2.0协议，开发了一个智能化的武汉旅游攻略系统。这次实践让我深深感受到了AI与传统地图服务结合的巨大潜力。
作为一名长期关注AI开发工具的技术爱好者，我一直在寻找能够真正提高开发效率的工具。当我接触到Trae这款AI IDE时，它的自然语言编程能力就深深吸引了我。而高德地图推出的MCP 2.0协议，更是为AI应用提供了标准化的地理信息服务接口，这让我看到了无限的可能性。
在这次武汉国庆旅游项目中，我仅仅通过自然语言描述需求，Trae就能自动生成包含路线规划、天气查询、POI搜索等功能的完整网页应用。整个开发过程就像是在与一位经验丰富的开发伙伴对话，我只需要描述想要什么功能，它就能理解我的意图并转化为具体的代码实现。
最让我印象深刻的是，这个系统不仅能够规划出科学合理的旅游路线，还能实时考虑天气因素、交通状况、景点开放时间等多维度信息，真正做到了智能化的旅行规划。从地理编码到路径规划，从POI搜索到天气查询，高德MCP 2.0提供的14项核心能力覆盖了出行场景的方方面面，而Trae则将这些能力完美地整合到了用户友好的界面中。
效果演示
edgeone pages部署的在线地址：[https://mcp.edgeone.site/share/ttob_xJRB8TOxiYYkIt1z\](https://mcp.edgeone.site/share/ttob_xJRB8TOxiYYkIt1z)
1. Trae AI IDE：重新定义开发体验
1.1 工具概述
Trae（[https://www.trae.cn/）是一款革命性的AI集成开发环境，它通过自然语言处理技术，让开发者能够用简单的描述来生成复杂的应用程序。\](https://www.trae.cn/）是一款革命性的AI集成开发环境，它通过自然语言处理技术，让开发者能够用简单的描述来生成复杂的应用程序。)
bash
# Trae安装非常简单
# 1. 访问官网 https://www.trae.cn/
# 2. 根据操作系统下载对应版本
# 3. 按照安装向导完成安装
# 4. 启动后即可开始AI驱动的开发体验
1.2 核心特性
Trae的核心优势在于它能够理解开发者的自然语言意图，并将其转化为具体的代码实现：
javascript
// 传统开发方式需要手写大量代码
function createTravelRoute(startPoint, endPoint) {
// 复杂的路径规划逻辑
// 地理编码处理
// API调用封装
// 错误处理
// ...数百行代码
}
// 在Trae中，只需要描述需求：
// "创建一个武汉旅游路线规划功能，包含景点推荐、路径优化、天气查询"
// AI会自动生成完整的实现代码
图1：Trae与高德MCP技术架构图 - 展示了AI IDE与地图服务的深度集成架构
2. 高德MCP 2.0：AI时代的地图服务革命
2.1 高德MCP介绍
高德MCP2.0简介
高德MCP2.0实际上是大模型+高德MCP1.0的组合体，是真正的给AI装上了翅膀。
真正让高德贯穿你的行前-行中-行后始终，让每个人都能轻松拥有一个"真正懂你的出行秘书"。
高德MCP2.0架构
高德MCP采用的标准的MCP协议以及CS架构，用户在AI IDE中Client输入自然语言需求，发送到MCP Server进行处理。
高德MCP2.0能力介绍
| **功能** | **描述** | **输入** | **输出** | | --- | --- | --- | --- | | 生成专属地图小程序 | 将出行规划方案导入高德地图，生成专属（旅行）地图小程序 | 行程名称、行程详情（每日行程描述、行程途径点位） | 专属小程序跳转链接 | | 导航到目的地 | 根据用户传入经纬度，启动导航 | 目的地经纬度 | 高德导航跳转链接 | | 打车 | 根据用户输入起终经纬度坐标，发起打车请求 | origin (起点经纬度)，destination (终点经纬度) | 高德打车唤端链接 | | 地理编码 | 将详细的结构化地址转换为经纬度坐标 | address (位置信息)，city (城市信息，非必须) | location (位置经纬度) | | 逆地理编码 | 将一个高德经纬度坐标转换为行政区划地址信息 | location (位置经纬度) | addressComponent (位置信息，包括省市区等信息) | | IP 定位 | 根据用户输入的 IP 地址，定位 IP 的所在位置 | IP | province (省)，city (城市)，adcode (城市编码) | | 天气查询 | 根据城市名称或者标准adcode查询指定城市的天气 | city (城市名称或城市adcode) | forecasts (预报天气) | | 骑行路径规划 | 规划骑行通勤方案，最大支持 500km | origin (起点经纬度)，destination (终点经纬度) | distance (规划距离)，duration (规划时间)，steps (规划步骤信息) | | 步行路径规划 | 规划100km 以内的步行通勤方案 | origin (起点经纬度)，destination (终点经纬度) | origin (起点信息)，destination (终点信息)，paths (规划具体信息) | | 驾车路径规划 | 规划以小客车、轿车通勤出行的方案 | origin (起点经纬度)，destination (终点经纬度) | origin (起点信息)，destination (终点信息)，paths (规划具体信息) | | 公交路径规划 | 规划综合各类公共交通方式的通勤方案 | origin (起点经纬度)，destination (终点经纬度)，city (起点城市)，cityd (终点城市) | origin (起点信息)，destination (终点信息)，distance (规划距离)，transits (规划具体信息) | | 距离测量 | 测量两个经纬度坐标之间的距离 | origin (起点经纬度)，destination (终点经纬度) | origin_id (起点信息)，dest_id (终点信息)，distance (规划距离)，duration (时间) | | 关键词搜索 | 根据用户传入关键词，搜索相关的POI（兴趣点）地点信息 | keywords (搜索关键词)，city (查询城市，非必须) | suggestion (搜索建议)，pois (地点信息列表) | | 周边搜索 | 搜索指定坐标周围半径范围内的POI地点信息 | keywords (搜索关键词)，location (中心点经度纬度)，radius (搜索半径，非必须) | pois (地点信息列表) | | 详情搜索 | 查询POI ID的详细信息 | id (关键词搜或周边搜获取的poiid) | 地点详情信息：location (地点经纬度)，address (地址)，business_area (商圈)，city(城市)，type (地点类型) 等 |
2.2 访问高德地图开发平台
- 访问高德开发平台：[https://lbs.amap.com/api\](https://lbs.amap.com/api) 2. 查看高德MCP Servers文档[https://lbs.amap.com/api/mcp-server/summary\](https://lbs.amap.com/api/mcp-server/summary) 3. 参考高德官方给出的示例进行MCP的配置
2.3 创建高德API KEY
登录高德开发者平台控制台
https://console.amap.com/dev/index\](https://console.amap.com/dev/index)!\[\](https://cdn.nlark.com/yuque/0/2025/png/27326384/1755885611284-c9dbfe0e-5488-4927-ae15-cce468e16172.png)
#### 进入应用管理
\[https://console.amap.com/dev/key/app\](https://console.amap.com/dev/key/app)
#### 创建API KEY
!\[\](https://cdn.nlark.com/yuque/0/2025/png/27326384/1755885680880-af6b5d69-b319-4c1b-9401-e8b231450e2f.png)
#### 2.4 配置高德MCP
直接复制下方的json，导入到trae中
```json
{
"mcpServers": {
"amap-maps-streamableHTTP": {
"url": "https://mcp.amap.com/mcp?key=您的密钥"
}
}
}
```
可以看到高德地图提供的工具，如此现实便是配置成功
### 3. 武汉旅游项目实战开发
#### 3.1 项目需求分析
这次实践的目标是为国庆节制作一个武汉4天旅游攻略，具体需求包括： "在快速发展的AI时代，最重要的不是掌握所有技术细节，而是学会如何与AI协作，让技术为创意服务。" ------ 摘星
**图3：用户交互时序图 - 展示从需求输入到攻略生成的完整流程**
#### 3.2设计好AI Coding提示词
参考官方的提示词案例，根据你的具体业务需求设计出AI Coding提示词：
```plain
制定一个十一计划去武汉游玩4天的旅行攻略。
1、帮我制作旅行攻略，考虑出行时间和路线，以及天气状况路线规划。
2、制作网页地图自定义绘制旅游路线和位置。 网页使用现代美学页面风格，景区图片以卡片展示。
3、行程规划结果在高德地图app展示，并集成到h5页面中。
4、同一天行程景区之间我想打车前往。
5、生成文件名 kmTravel.html。
```
#### 3.3 Trae根据提示词开发
将设计好的提示词输入到Trae中，Trae就会自动设计出网页，并且调用高德MCP2.0中提供的功能设计好路线规划，并且会在网页中展示：
#### 3.4 迭代开发
在开发的过程中会遇到各种各样的问题，这时候需要我们指导AI，根据我们想要的内容进行改正：
#### 3.5 部署上线
为了演示效果，我才用了EdgeOne Pages将本页面部署上线，这样大家就可以继续预览访问了
```plain
调用edgeone pages mcp将本项目部署为在线网页
```
#### 3.6 \*\*武汉旅游攻略开发流程图\*\*
!\[\](https://cdn.nlark.com/yuque/0/2025/png/27326384/1755888017527-75b902c7-5233-49f4-8410-09d1401da6bd.png)
**图4：武汉旅游攻略开发流程图 - 展示从需求分析到系统部署的完整开发流程**
### 4. 部署与上线
#### 4.1 EdgeOne Pages部署与上线
项目最终部署到了腾讯云EdgeOne Pages平台，实现了全球CDN加速：
```bash
# 部署配置
# 项目文件：kmTravel.html
# 部署平台：EdgeOne Pages
# 访问地址：https://mcp.edgeone.site/share/ttob_xJRB8TOxiYYkIt1z
# 部署步骤：
# 1. 构建优化后的HTML文件
# 2. 配置CDN加速节点
# 3. 设置SSL证书
# 4. 绑定自定义域名
```
#### 4.2 项目源码
\`\`\`html 武汉四天三夜旅行攻略 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\&display=swap'); body { font-family: 'Inter', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\&display=swap'); body { font-family: 'Inter', sans-serif; } .hero-bg { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/id/1036/1920/1080'); background-size: cover; background-position: center; } .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .map-container { height: 400px; width: 100%; } .itinerary-day { scroll-margin-top: 80px; }
[武汉旅行攻略](#武汉旅行攻略 "#")
[行程概览](#行程概览 "#overview") [第一天](#第一天 "#day1") [第二天](#第二天 "#day2") [第三天](#第三天 "#day3") [第四天](#第四天 "#day4") [旅行地图](#旅行地图 "#map")
[行程概览](#行程概览 "#overview") [第一天](#第一天 "#day1") [第二天](#第二天 "#day2") [第三天](#第三天 "#day3") [第四天](#第四天 "#day4") [旅行地图](#旅行地图 "#map")
```xml
2024年10月1日至4日，武汉之旅 市内主要景点之间均选择打车前往，方便快捷 多云到晴天，偏北风4-5级，15-26°C 武汉的标志性建筑之一，位于蛇山之巅，登上黄鹤楼可以俯瞰武汉三镇的美景。 武汉著名的小吃街，这里有各种各样的美食，如热干面、豆皮、鸭脖等。 横跨长江的第一座大桥，也是武汉的标志性建筑之一，可以在桥上散步，欣赏江景。 上午9:00-11:30游览黄鹤楼，欣赏武汉全景 中午12:00-13:30在户部巷品尝武汉特色美食 下午14:00-16:00漫步长江大桥，欣赏江景 晴天，偏北风3-4级，12-24°C 馆内收藏了大量的历史文物和艺术品，如曾侯乙编钟、越王勾践剑等。 是中国最大的城中湖，景色秀丽，可以乘船游览湖光山色，也可以骑行或散步。 中国最美丽的大学之一，校园内有许多古老的建筑和美丽的花园。 上午9:00-11:30参观湖北省博物馆，欣赏珍贵文物 中午12:00-14:30在东湖风景区游览，可选择骑行或乘船 下午15:00-17:00漫步武大校园，欣赏古老建筑 晴天到多云，偏北风3-4级转2-3级，12-24°C 武汉最繁华的商业街之一，有许多商场、餐厅和娱乐场所。 武汉的滨江公园，这里有美丽的江景和休闲设施，可以在江边散步、放风筝。 一艘复古的轮船，晚上可以乘坐知音号游览长江，欣赏夜景和表演。 上午9:30-11:30在江汉路步行街购物、观光 中午12:00-14:30在汉口江滩游览，欣赏江景 晚上19:00-21:30乘坐知音号，欣赏长江夜景和表演 晴天到多云，偏北风2-3级，13-24°C 武汉著名的佛教寺庙，寺内有许多古老的建筑和佛像。 品尝武汉特色美食，如热干面、豆皮、武昌鱼等。 又名俞伯牙台，是中国音乐文化古迹之一。 上午9:00-11:00参观归元寺，感受佛教文化 中午11:30-13:00品尝武汉特色美食 下午14:00-16:00游览古琴台，了解音乐文化 查看所有景点的位置和路线行程概览
天气状况
交通方式
主要景点
特色美食
住宿建议
第一天 (10月1日)
黄鹤楼
上午
户部巷
中午
长江大桥
下午
行程路线
黄鹤楼
户部巷
长江大桥
第二天 (10月2日)
湖北省博物馆
上午
东湖风景区
中午
武汉大学
下午
行程路线
湖北省博物馆
东湖风景区
武汉大学
第三天 (10月3日)
江汉路步行街
上午
汉口江滩
中午
知音号
晚上
行程路线
江汉路步行街
汉口江滩
知音号
第四天 (10月4日)
归元寺
上午
特色午餐
中午
古琴台
下午
行程路线
归元寺
特色午餐
古琴台
旅行地图
${attraction.name}
`, offset: new AMap.Pixel(0, -30) }); marker.on('click', function() { infoWindow.open(map, marker.getPosition()); }); }); // 第一天路线 const day1Route = [ [114.298574, 30.592855], // 黄鹤楼 [114.303144, 30.590639], // 户部巷 [114.283843, 30.590931] // 长江大桥 ]; // 绘制第一天路线 const polyline1 = new AMap.Polyline({ path: day1Route, strokeColor: '#FF0000', strokeWeight: 5, strokeOpacity: 0.7, map: map }); // 第二天路线 const day2Route = [ [114.319507, 30.546004], // 湖北省博物馆 [114.330397, 30.543851], // 东湖风景区 [114.360426, 30.543279] // 武汉大学 ]; // 绘制第二天路线 const polyline2 = new AMap.Polyline({ path: day2Route, strokeColor: '#0080FF', strokeWeight: 5, strokeOpacity: 0.7, map: map }); // 第三天路线 const day3Route = [ [114.276881, 30.615411], // 江汉路步行街 [114.270975, 30.625122], // 汉口江滩 [114.274556, 30.623277] // 知音号 ]; // 绘制第三天路线 const polyline3 = new AMap.Polyline({ path: day3Route, strokeColor: '#00B42A', strokeWeight: 5, strokeOpacity: 0.7, map: map }); // 第四天路线 const day4Route = [ [114.252793, 30.560929], // 归元寺 [114.255047, 30.567161] // 古琴台 ]; // 绘制第四天路线 const polyline4 = new AMap.Polyline({ path: day4Route, strokeColor: '#FF7D00', strokeWeight: 5, strokeOpacity: 0.7, map: map }); // 调整地图视野 map.setFitView([polyline1, polyline2, polyline3, polyline4]); } catch (error) { console.error('地图初始化失败:', error); document.getElementById('travelMap').innerHTML = '地图加载失败，请检查您的API密钥是否正确