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

前提条件

已在 IDE 中安装通义灵码^【1】，并确认版本在 2.5 以上。
已获取高德申请的 key^【2】。

近期，阿里云正式宣布开源其迄今最具突破性的AI编程大模型Qwen3-Coder，并宣布AI编程产品“通义灵码”全面支持，且向全球开发者免费提供不限量服务，不需要邀请码，你就能即刻体验到全球最领先的编程能力。

1. 第一步：成为高德开发者并创建 Key

帮助文档

登录高德开放平台控制台^【3】，如果没有开发者账号，请注册成为开发者^【4】。

创建成功后，可获取 Key 和安全密钥。

在高德的控制台选择应用管理，并创建应用。

640 (1).png

然后给应用创建对应的 key，选择 Web 端（JS API）模式。

640 (2).png

最后得到一个 key（这里需要注意：你在 2021 年 12 月 02 日以后申请的 key 需要配合你的安全密钥一起使用。后面生成代码时，将不会配置这个安全密钥）。

640 (3).png

2. 第二步：配置 MCP

单击 IntelliJ IDEA 侧边栏的通义灵码图标进入智能会话。

1. 本文使用 IntelliJ IDEA 进行演示，其他 IDE 的灵码图标位置可能稍有不同，您可参见下载和安装【1】进入智能会话。

2. 在智能会话页面，您可通过以下两种方式进入 MCP 服务页面。

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

640 (4).png

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

名称：输入服务名称，例如：amap-sse。
类型：选择 SSE。
服务地址：https://mcp.amap.com/sse?key=<您在高德申请的key>。

使用获取高德申请的 key^【2】替换<您在高德申请的key>，注意不要有空格。

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

640 (5).png

3. 第三步：生成 travel_tips.html 文件

重要

在通义灵码智能体工作之前，请务必确保已经打开任何一个工程文件，否则 MCP 调用会失败，更多通义灵码相关 MCP 使用问题，MCP 常见问题说明^【5】。

1. 打开通义灵码智能会话对话框，并切换为智能体模式，同时选择 qwen3 coder 这个模型。

2. 在对话框中输入以下提示词并回车。

##北京3天端午节（25年5月31日到25年6月2日）的旅行攻略。
#帮我制作旅行攻略，考虑出行时间和路线，以及天气状况路线规划。
#制作网页，页面包含天气卡片展示3天的天气详情以及旅行小贴士，展示每天的旅行计划，每天安排3个景点。
#制作网页地图自定义绘制旅游路线和位置。
##网页使用简约美观页面风格，景区图片以卡片展示。
#行程规划结果在高德地图app展示，并集成到h5页面中。
##同一天行程景区之间我想打车前往。
#生成文件名 travel_tips.html。

3. 灵码将根据您的需求，自主规格并调用所需工具，最终生成 travel_tips.html 文件。

640 (6).png

4. 最终生成的页面效果如下所示。

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

640 (7).png

640 (8).png

640 (9).png

640 (10).png

640 (11).png

4. 第四步：修正地图

因为第一次生成时模式没有识别高德的新的 API，这个时候修改 travel_tips.html 文件配置 key 也是不生效的。

需要同时配置安全密钥，所以需要给模型新的输入：

（这个是参考高德文档，注意这里使用的是明文的方式，不可以用于生产）

Prompt：

<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: "替换为你申请的 key", //申请好的 Web 端开发 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
    AMapUI: {
      //是否加载 AMapUI，缺省不加载
      version: "1.1", //AMapUI 版本
      plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件
    },
    Loca: {
      //是否加载 Loca， 缺省不加载
      version: "2.0", //Loca 版本
    },
  })
    .then((AMap) => {
      var map = new AMap.Map("container"); //"container"为 <div> 容器的 id
      map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
</script>
请根据这个方式来修改地图使用，需要同时配置安全密钥和开发 Key

重新生成代码后，在代码里配置安全密钥和 key，就可以地图展示坐标和路径了。

但是这里有个问题，路径只是画了一个直线，部署实际路径，这个时候需要让灵码再修正。

Prompt：

似乎高德地图画的路线不是实际道路的路线，请展示实际道路的路径

最后得到这个效果。

640 (12).png

这里又多了一个问题，如果三天的行程路径都展示到一起会显得比较难看，我希望可以根据具体的每一天进行过滤查看：

Prompt：

我希望多一个过滤选择， 来选择具体哪天一的具体路线， 而不是显示所有天的路线

然后得到这样一个效果：

640 (13).png

但是我发现模型生成的代码有问题，当我选择具体哪一天的时候，地图没有刷新线路，然后我再让灵码进行修复。

当我选择了具体哪一天的路线后， 地图没有刷新

然后就可以得到一个相对完美的效果了。

如果希望再进一步完善：

Prompt：

我希望选择具体哪一天的行程后， 再展示具体的开车线路信息描述

则在选择路线后，还可以得到具体的线路信息，展示如下：

640 (14).png

5. 第五步：扩展提示词

##成都7天国庆节（25年10月1日到25年10月7日）的旅行攻略。
#帮我制作旅行攻略，考虑出行时间和路线，以及天气状况路线规划。
#制作网页，页面包含天气卡片展示7天的天气详情以及旅行小贴士，展示每天的旅行计划，每天安排3个景点。
#制作网页地图自定义绘制旅游路线和位置。
##网页使用简约美观页面风格，景区图片以卡片展示。
#行程规划结果在高德地图app展示，并集成到h5页面中。
##同一天行程景区之间我想打车前往。
#生成文件名 travel_tips.html。