使用AI大模型+高德MCP规划旅游行程并生成网页

氦客

已于 2025-06-28 11:17:16 修改

阅读量977

点赞数 24

CC 4.0 BY-SA版权

分类专栏： AI编程文章标签：高德MCP AI大模型规划行程旅游规划 Trae Cursor MCP Server

于 2025-06-28 11:12:44 首次发布

本文链接：https://blog.csdn.net/EthanCo/article/details/148941911

AI编程专栏收录该内容

3 篇文章

订阅专栏

使用高德MCP规划旅游行程

先来看下效果:

在这里插入图片描述

1. 环境

Trae IDE 版本 : 0.6.8
电脑系统 : Windows10
Node.Js版本 : 22.17.0 (nxp版本:10.9.2)
Python版本 : 3.12.4
uvx版本 : 0.7.14
命令行工具 : PowerShell

1.1 安装Trae

Trae官网

在这里插入图片描述

1.2 配置MCP Server的运行环境

1.2.1 安装Python3

Windows上，如何安装Python3

验证Python3是否安装成功

python --version

在这里插入图片描述

1.2.2 安装UV (包含UVX)

powerShell中执行

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

在这里插入图片描述

加载 uvx 所需的运行时环境变量和初始化配置

注意这里的C:\Users\Haokai.Zhu需要改为你电脑上的路径

$env:Path = "C:\Users\Haokai.Zhu\.local\bin;$env:Path"

验证uvx 是否安装成功

uvx --version

在这里插入图片描述

1.2.3 安装Node.js

官网下载地址

验证是否安装成功

node -v
npx -v

在这里插入图片描述

1.2.4 重启Trae IDE

重启Trae IDE以使Node.js生效

2. 注册高德地图开发者

使用高德地图MCP，需要高德地图的Key，需要注册为高德地图开发者才能获取。

登录高德开放平台，我们这里选择注册为个人开发者即可。

然后来到控制台，创建新应用 :

在这里插入图片描述

应用创建完成后，点击应用条目右侧的 添加 Key 按钮。
将 服务平台 设置为 Web 服务。

在这里插入图片描述

点击提交即可

在这里插入图片描述

3. 在Trae中添加高德MCP

在Trae中，点击右上角的设置，然后在菜单中选择MCP。然后选择添加MCP。

在这里插入图片描述

搜索map，选择手动配置

在这里插入图片描述

在输入框中粘贴以下配置内容。AMAP_MAPS_API_KEY 部分需要填入 “第三步” 在高德开放平台上创建的 Key。

在这里插入图片描述

{
  "mcpServers": {
    "amap-maps": {
      "command": "npx",
      "args": ["-y", "@amap/amap-maps-mcp-server"],
      "env": {
        "AMAP_MAPS_API_KEY": "你在高德官网上申请的 key"
      }
    }
  }
}

点击"确认"。

然后就可以直接使用 Builder with MCP 来体验高德地图的 MCP Server了。

在这里插入图片描述

4. 创建自定义智能体并为其配置高德地图 MCP Server

智能体（Agent）是你面向不同开发场景的编程助手。你可以创建自定义智能体，通过灵活配置提示词和工具集，使其更高效地帮你完成复杂任务。

点击右上角设置，然后选择智能体。接着点击创建智能体。

在这里插入图片描述

配置智能体的提示词。可以使用以下参考提示词：

  你是一个经验丰富的旅行大师，具备成熟的行程规划能力。根据用户提供的目的地，你需要为用户制作详细的行程规划。具体要求如下：
  
  ## 设计要点
  - 网格布局，分区清晰
  - 打印友好：高对比度、合适字体、避免深背景
  - 使用合适的图标区分活动类型（景点/餐饮/交通等）
  - 融入简约现代风格和专业旅行指南元素
  - 制作网页地图，自定义绘制旅游路线和位置
  - 网页使用简约美观页面风格，景区图片以卡片展示
  - 行程规划结果在高德地图 app 展示，并集成到 h5 页面中
  
  ## 必备内容
  - 行程标题（目的地、日期、天气）
  - 每日概览（带图标的活动摘要）
  - 详细时间表（时间/地点/活动/备注）
  - 交通信息（地图/路线/时间/方式）
  - 食宿信息（地址/时间/推荐）
  - 实用信息（紧急电话/注意事项）

在 工具-MCP 部分，仅勾选 amap-maps。

在 工具-内置 部分，文件系统（File System）、终端（Terminal）、联网搜索（Web Search）、预览（Preview）。

在这里插入图片描述