最新案例动态，请查阅AI 一键生成自定义旅游行程助手｜码道快速构建个性化出行方案小伙伴们快来进行实操吧！

一、概述

1.1 适用对象

• 个人开发者
• 高校学生
• 企业开发者

1.2 案例流程

华为云码道（CodeArts）代码智能体：是华为云打造的智能编码产品，深度融合IDE、自主开发模式与代码大模型能力，支持项目级代码生成、代码续写、研发知识问答、单元测试用例生成等核心功能，可高效提升开发者研发效率，带来优质的智能化编码体验。

本案例基于华为云码道与高德地图MCP Server构建了专业的行程规划助手，充分展示了AI Agent与专业服务融合的强大潜力，开发者通过本案例不仅能够快速掌握智能体应用的开发技能，更能深刻理解如何利用MCP协议打破模型能力边界，构建真正实用、可靠的AI应用。

说明：

1. 获取高德MCP Server；
2. 获取高德开放平台key；
3. 安装配置Windows版AI IDE华为云码道；
4. 通过码道搭建Flask后端框架 + 高德MCP客户端；
5. 实现旅行方案生成逻辑；
6. 添加高德地图API Key测试端点；
7. 通过码道实现前端HTML页面并优化背景图；
8. 调试与验证。

1.3 资源总览

本案例预计花费0元。

资源名称	规格	单价（元）
华为云码道（CodeArts）代码智能体	AI IDE免费版	免费
高德开放平台	MCP Server	免费

二、环境和资源准备

2.1 获取高德MCP服务

2.1.1 高德开放平台概述

高德开放平台是高德地图面向开发者与企业推出的一站式 LBS 位置服务平台，开放高精度定位、地图展示、路径规划、导航、POI 检索、地理编码等核心能力；
并提供覆盖 Web、Android、iOS、小程序及鸿蒙等多端的 API 与 SDK，支持快速集成位置服务。

2.1.2 登录高德开放平台并获取key

注册登录高德开放平台并进入成为开发者并创建 Key页面，可参考此页面步骤创建并获取key。

获取key具体步骤：

1. 登录高德开放平台。
2. 登录完成后，回到高德开放平台首页，点击页面右上角的控制台。

3. 在左侧导航栏中选择 账号中心 - 账号认证 - 个人开发者认证 ，进行认证。

4. 认证通过后在左侧导航栏中选择 应用管理 - 我的应用，进行应用创建。

5. 应用创建完成后，点击应用条目右侧的 添加 Key 按钮。

6. 填入 Key 的名称，将 服务平台 设置为 Web 服务，勾选 阅读并同意 高德地图开放平台服务协议 和 高德地图开放平台隐私权政策 选框，然后点击 提交 按钮。

7. 成功创建应用并为其添加 Key

2.2 安装配置华为云码道

2.2.1 Windows版AI IDE华为云码道安装部署

参考案例《Windows版AI IDE华为云码道（CodeArts）代码智能体安装部署》完成Windows版AI IDE华为云码道（CodeArts）代码智能体安装部署。

2.3 构建python开发环境

如电脑里已有Python开发环境则跳过此步骤。

如无Python环境可参考案例《SKILL快速构建你的Java、Python和Node.js开发环境》完成开发环境的安装。

三 开发自定义旅游行程助手

3.1 阶段一：搭建Flask后端框架 + 高德MCP客户端

打开码道使用 探索模式 和 智能体 模式后输入以下提示词：

# AI旅游规划助手 — 分阶段复现提示词
## 项目概述
在当前项目构建一个AI旅游规划Web应用：用户输入目的地城市、出行天数、每天景点数、出行日期和高德API Key，系统通过高德MCP获取真实POI/天气数据，生成结构化旅游方案并在网页上展示。
**技术栈**：Python(Flask)后端 + HTML前端，高德地图MCP（streamableHttp），高德URI API地图展示
---
## 阶段一：搭建Flask后端框架 + 高德MCP客户端
### 提示词
搭建一个Flask Web应用，要求：
1. Flask后端运行在端口5000，提供`/`路由渲染index.html
2. 封装高德地图MCP客户端类`AmapMCPClient`，支持以下方法：
  - `geocode(city)` - 地理编码
  - `search_poi(keyword, location, city, radius, offset)` - POI关键词搜索
  - `search_nearby(keyword, location, radius, offset)` - 周边搜索
  - `search_detail(poi_id)` - POI详情查询
  - `weather(city)` - 天气查询
3. MCP调用方式：POST `https://mcp.amap.com/mcp?key=用户API_KEY`，JSON-RPC 2.0格式，headers包含`Content-Type: application/json`和`Accept: application/json, text/event-stream`
4. MCP返回数据可能有两种格式：普通JSON或SSE流(text/event-stream)，都需要解析。SSE流需要逐行读取`data:`开头的行，解析JSON，取`result`字段
5. 封装数据解析函数：`parse_geocode`、`parse_poi_list`、`parse_weather`，从MCP返回的嵌套结构中提取数据
6. MCP返回的POI搜索结果**不含location字段**，必须用`search_detail`逐个查询获取经纬度
7. 路线距离使用haversine公式计算直线距离，时长按30km/h估算，**不调用MCP驾车路线规划**（太慢）
8. 实现贪心TSP算法`greedy_tsp`，对每天的景点按距离排序
### 关键注意事项
- MCP POI搜索不返回location！必须逐个detail查询，detail成功率约50%
- 天气API默认只返回4天预报，超出部分需补全
- MCP超时设60秒
---

如出现以下提示，选择 运行本次：

阶段一完成后，我们可以看到，码道已经帮我们创建了一个本地的高德MCP Client，这一步的目的是为了后续调用高德MCP Server。

3.2 阶段二：实现旅行方案生成逻辑

继续在码道对话框内输入以下提示词：

## 阶段二：实现旅行方案生成逻辑（/plan路由）
### 提示词
实现`/plan` POST路由，接收JSON参数：city、days、spots_per_day、api_key、start_date，返回JSON旅行方案。

 逻辑流程：
 1. **参数校验**：days 1-7，spots_per_day 1-3，前后端都要校验
 2. **地理编码**：调用MCP geocode获取城市经纬度
 3. **天气查询**：调用MCP weather，预报从出行日期开始（过滤早于start_date的预报），天数不够时用最后一天数据补全
 4. **景点POI收集**：
    - 使用21个搜索关键词：旅游景点、风景名胜、景区、名胜古迹、公园、博物馆、纪念馆、古镇、寺庙、湖泊、山、景点、旅游、风景区、文化遗址、历史建筑、宗教场所、广场、游乐场、温泉、湿地
    - 搜索半径50km，每次最多25条
    - 搜索阶段去重（seen_ids），将没有location的POI放入need_detail_list
    - **关键bug避坑**：detail查询阶段不要再用seen_ids检查跳过！搜索阶段已经去重，detail阶段直接查询即可
    - 用math.ceil计算actual_days，确保即使POI不够也能生成至少1天行程
 1. **美食搜索**：4个关键词（特色美食、当地小吃、餐厅、美食），半径8km，取5个有图片且有评分的
 2. **住宿搜索**：3个关键词（酒店、宾馆、住宿），半径8km，取5个有图片且有评分的
 3. **行程规划**：
    - 按actual_days和spots_per_day分配景点
    - 每天用贪心TSP排序
    - 生成时间调度：从8:30开始，每个景点游览2-2.5小时，景点间打车
    - 打车费用估算：距离km×3元，最低8元
 1. **地图URL生成**：
    - 格式：`https://uri.amap.com/navigation?from=经度,纬度,名称&to=经度,纬度,名称&via=经度,纬度,名称&mode=car&callnative=0&src=城市旅行攻略&policy=0`
    - **不要用quote编码中文**！直接拼接经度,纬度,名称
    - via参数用`|`分隔多个途经点
 1. **出行小贴士**：根据天气动态生成
 2. 返回JSON包含：city、weather、daily_plans、food_recommendations、hotel_recommendations、travel_tips、actual_days
### 关键注意事项
- **detail查询的seen_ids bug是最核心的坑**：搜索阶段把pid加入seen_ids，detail阶段如果也检查seen_ids就全部跳过，导致0个有location的POI，行程为空
- actual_days用`math.ceil(len/spot_per_day)`而不是整除`//`
- 地图URL中文不编码
---

这一步的目的是实现旅行方案的具体逻辑。

3.3 阶段三：API Key测试端点

阶段二执行完成后，继续在对话框内输入以下提示词：

## 阶段三：API Key测试端点
### 提示词
 添加`/test_key` POST路由，接收api_key参数，用geocode("北京")测试Key是否有效。返回`{"ok": true/false, "message": "..."}`
---

这一步的目的是给高德apikey增加一个测试端点，确保用户输入的key真实有效再进行下一步。

3.4 阶段四：前端HTML页面开发

以上步骤完成后，继续在对话框内输入以下提示词：

## 阶段四：前端HTML页面
### 提示词
 创建templates/index.html，单页应用，要求：

 **表单区域**：
 - 旅游目的地城市（必填）
 - 出行日期（type=date，min设为今天，不能选过去日期，默认明天）
 - 出行天数（number，min=1 max=7，默认5，前后端校验1-7）
 - 每天游玩景点数（number，min=1 max=3，默认3，前后端校验1-3）
 - 高德地图API Key（必填）+ "测试连接"按钮
 - 生成旅行方案按钮（默认disabled，API Key测试通过后才启用）

 **API Key测试流程**：
 - 点击"测试连接"调用/test_key端点
 - 通过：按钮变绿显示"测试通过"，启用生成按钮
 - 失败：按钮变红显示"测试失败"，显示错误信息
 - Key输入变化时重置状态
 - 生成方案前检查keyTested状态，未测试则提示

 **结果展示区域**（顺序）：
 1. 天气卡片（蓝色渐变背景，当前天气+多日预报）
 2. 出行小贴士
 3. 每日行程卡片（D1/D2/D3徽章，3列景点网格，visit→taxi→visit路线步骤）
 4. 美食推荐卡片（有图片且有评分才展示，最多5个）
 5. 住宿推荐卡片（有图片且有评分才展示，最多5个）
 6. 注意用户输入的每天游玩景点和页面显示的行程景点要对应上
 7. 路线地图（页面最底部，Tab切换每天路线，iframe嵌入高德URI导航，含"查看驾车导航"和"一键打车"按钮）

 **地图区域**：
 - Tab按钮切换每天路线（如"第1天 鸡鸣寺→总统府→玄武湖"）
 - iframe src切换不同天的地图URL
 - 路线描述文字
 - 两个操作按钮：导航链接和打车链接

 **样式要求**：
 - 背景图用body::before伪元素，opacity 0.5，z-index 0，pointer-events none
 - 卡片用半透明白色背景（rgba(255,255,255,0.88~0.9)），让背景图可见
 - 渐变标题、圆角20px卡片、hover动画、backdrop-filter blur
 - form-section / tips-section rgba(255,255,255,0.88)
 - day-card / rec-section / map-section rgba(255,255,255,0.9)
 - 每天行程用不同颜色（dayColors数组循环）
 - 响应式：900px以下单列

 **交互要求**：
 - 点击生成方案后页面**不要自动滚动**（不要scrollIntoView）
 - Loading遮罩层显示进度
 - 按钮disabled防重复点击，finally确保恢复
 - 美食/住宿没有图片或没有评分的一律不展示
---

这一步是构建前端页面，创建前端的表单区域、前后端校验逻辑、API Key测试流程等，如用户输入高德APIKey后需点击"测试连接"调用测试端点，显示“通过”后再继续生成旅游行程，如错误则不进行下一步。

3.5 阶段五：背景图优化（可选）

为了使页面更加美化，我们点击下载背景图，并放进当前目录下。

继续输入以下提示词：

## 阶段五：背景图优化
### 提示词
 1. 将背景图片pic1.png复制到static/bg.jpg
 2. 用Pillow压缩：resize到1600px宽，保存为JPEG quality=85
 3. CSS引用：`background: url('/static/bg.jpg') center/cover no-repeat;`
 4. opacity设为0.5让背景清晰可见
---

这一步的目的是进行图片压缩，原始图片比较大，而过大的图片可能导致页面加载缓慢，所以我们需要压缩图片提高网页加载速度。

3.6 阶段六：调试与验证

终于到了最后一步，想要完成一个好的应用那么调试与验证是必不可少的。

此时，输入以下提示词：

注意：提示词内需换成您真实的高德API Key，高德API Key从2.12章节获取。

## 阶段六：调试与验证
### 提示词
 启动项目，并用真实高德API Key：【此处换成您真实的高德API Key】，测试以下场景：
 1. API Key测试按钮：有效Key通过，无效Key失败
 2. 5天×3景点：验证5天行程全部生成，日期连续，每天3景点，地图URL非空
 3. 7天×3景点：验证7天行程全部生成（需要21个POI）
 4. 天气预报从出行日期开始，天数与行程一致
 5. 美食和住宿至少展示几个
 6. 地图Tab可切换，iframe显示正确
 7. 参数超限校验：天数7、景点3均被拦截
 8. 页面不自动滚动
 9. 行程景点图片和美食与住宿图片都要展示，注意字段统一：使用`photo`单字符串字段，如果行程图片展示不全，注意先过滤出所有有图片的景点，再基于有图片景点数量重新计算实际天数，从有图片景点中选取需要的数量分配到每天
### 常见问题排查清单
| 问题 | 根因 | 解决 |
|------|------|------|
| 行程和地图为空 | detail阶段seen_ids跳过所有POI | 去掉detail阶段的seen_ids检查 |
| 按钮点不了第二次 | SSE流异常导致btn.disabled未恢复 | 改用普通JSON响应，finally确保恢复 |
| "服务器未返回结果" | generator异常被Flask吞掉 | 用try/except包裹，或改回JSON响应 |
| 天气从今天开始而非出行日 | parse_weather未过滤 | 过滤forecasts中date=start_date的项 |
| 地图URL中文乱码 | 用了quote编码中文 | 不编码，直接拼接 |
| actual_days=0 | 整除//导致（如2//3=0） | 改用math.ceil |
| 美食/住宿不全 | 搜索关键词少、半径小 | 增加关键词、半径8km |
| 背景图不可见 | 卡片opacity太高(0.95) | 降到0.88-0.9，背景opacity提到0.5 |
| 页面自动跳转 | renderResult末尾scrollIntoView | 移除该行 |
---

由于应用是AI生成，所以在使用真实key测试的时候，可能会出现一些问题，不过不用担心，码道会帮我们进行修复的。

3.7 阶段七：进行页面验证

等待验证完成后就到了检验成果的时候了，我们可以在页面进行测试，如果出现一些问题我们可以通过截图或者文字的形式反馈给码道进行修复。

经实测，最便捷让码道找到问题及修复的方案是输入真实API Key，然后描述具体问题，如：

用真实高德API Key：【此处换成您真实的高德API Key】，测试以下场景并修复：行程与景点住宿卡片图片不显示或显示不全。

这样码道可以根据我们提供的真实key去进行测试、修复、验证，效率加倍。

最终，我们看到完整的页面，并可以一键生成自定义旅游行程助手了！

至此，AI 一键生成自定义旅游行程助手｜码道快速构建个性化出行方案案例结束，各位小伙伴快来体验吧。

注意：由于本应用是CodeArts代码智能体自动生成，每次提问生成的代码及最后的运行结果均存在出入，开发者可根据自己的需求，调教模型生成自己想要的结果。若想体验与案例一样的结果，请下载源码进行体验。

反馈改进建议

如您在案例实操过程中遇到问题或有改进建议，可以到论坛帖评论区反馈即可，我们会及时响应处理，谢谢！