Qoder CN+高德 MCP：30分钟定制出游攻略网页

本文介绍如何使用 Qoder CN 智能体与高德MCP 2.0 制作为期三天的假期旅行攻略页面。同时，将生成的旅行攻略导入高德地图APP，以便创建专属地图，以满足在行程中进行探店、导航、打车及购票等出行需求。

​

前提条件

• 已在 IDE 中安装 Qoder CN，并确认版本在 2.5 以上。
• 已获取高德申请的key。

​

视频演示

​

步骤一：添加MCP 服务

1. 单击 IntelliJ IDEA 侧边栏的千问 Qoder CN 图标进入智能会话。本文使用 IntelliJ IDEA 进行演示，其他 IDE 的 Qoder CN 图标位置可能稍有不同，您可参见安装指南进入智能会话。
2. 在智能会话页面，您可通过以下两种方式进入MCP 服务页面。

• 方式一：单击欢迎语中的MCP 工具链接进入 MCP 服务页面。
• 方式二：单击右上角头像，并在下拉菜单中选择个人设置，然后在个人设置页面单击MCP 服务下的条形框。

3. 单击MCP 服务右侧的+，并选择手动添加，然后在弹出的添加MCP服务页面，配置以下选项：

• 名称：输入服务名称，例如：amap-sse。
• 类型：选择 SSE。
• 服务地址：https://mcp.amap.com/sse?key=<您在高德申请的key>。使用[获取高德申请的key](https://lbs.amap.com/api/mcp-server/create-project-and-key)替换<您在高德申请的key>，注意不要有空格。

4. 单击立即添加，等到链接图标变成绿色则代表MCP服务添加成功。
   

​

步骤二：生成travel_tips.html文件

1. 打开千问 Qoder CN智能会话对话框，并切换为智能体模式。
2. 在对话框中输入以下提示词并回车。
   ##北京3天端午节（25年5月31日到25年6月2日）的旅行攻略。
   #帮我制作旅行攻略，考虑出行时间和路线，以及天气状况路线规划。
   #制作网页，页面包含天气卡片展示3天的天气详情以及旅行小贴士，展示每天的旅行计划，每天安排3个景点。
   #制作网页地图自定义绘制旅游路线和位置。
   ##网页使用简约美观页面风格，景区图片以卡片展示。
   #行程规划结果在高德地图app展示，并集成到h5页面中。
   ##同一天行程景区之间我想打车前往。
   #生成文件名 travel_tips.html。
   
   
3. Qoder CN 将根据您的需求，自主规划并调用所需工具，最终生成travel_tips.html文件。
   
4. 最终生成的页面效果如下所示。

• 如果生成的页面效果、布局、字体及颜色不符合你的预期，你可以多次跟 Qoder CN 沟通和对话。
• 如果无法查看预览效果，可以直接选择千问 Qoder CN agent 模型让AI帮你生成预览效果。