高德 MCP+通义灵码 定制专属地图 最后更新时间: 2026年03月17日
1、案例介绍
马上端午小长假，计划去北京旅游，如何使用高德MCP 2.0+通义灵码编程智能体 制作 3 天端午旅行攻略页面。同时将生成的旅行攻略导入高德地图APP生成专属旅行地图，以满足行中探店、导航、打车等出行需求。
2、实现方式：
2.1 安装通义灵码 AI IDE
下载 通义灵码 AI IDE
2.2 添加 MCP 服务
单击通义灵码欢迎语中的 MCP 工具链接，或在右上角头像处进入个人设置，单击条形框，进入 MCP 服务页面。
2.3 通过手动方式完成添加
单击MCP 服务右侧的+，然后在弹出的MCP配置页面，配置以下选项：
配置如下：
{
"mcpServers": {
"amap-maps-streamableHTTP": {
"url": "http://mcp.amap.com/mcp?key=您在高德官网上申请的key"
}
}
}注意
使用 高德申请的key 替换<您在高德申请的key>，注意不要有空格。
2.4 查看 MCP 服务工具状态
保存后关闭配置页面，等到链接图标变成绿色则代表MCP服务添加成功。
注意
在通义灵码智能体工作之前，请务必确保已经打开了任一工程文件，否则 MCP 调用会失败 ，更多通义灵码相关MCP使用问题，MCP常见问题说明。
3、开始使用
3.1 大模型需求描述：
- 打开通义灵码智能会话对话框，并切换为智能体模式。
- 在对话框中输入以下提示词并回车。
##北京3天端午节（25年5月31日到25年6月2日）的旅行攻略。
#帮我制作旅行攻略，考虑出行时间和路线，以及天气状况路线规划。
#制作网页，页面包含天气卡片展示3天的天气详情以及旅行小贴士，展示每天的旅行计划，每天安排3个景点。
#制作网页地图自定义绘制旅游路线和位置。
##网页使用简约美观页面风格，景区图片以卡片展示。
#行程规划结果在高德地图app展示，并集成到h5页面中。
##同一天行程景区之间我想打车前往。
#生成文件名 travel_tips.html。如需要制作别的城市攻略，可以直接将“北京”更改为相关地名
3.2 模型交互过程
第一次模型交互
第二次模型交互
提示
- 如果生成的页面效果、交互形式、字体及颜色不符合你的预期，你可以通过多轮对话，如prompt补充进去“每个地点到下一个地点需要生成打车链接命名为：从 XX 到 XX 打车“、“打车按钮的链接显示白色”、“打车点位坐标需要正确对上浏览景点”等，让通义灵码持续优化生成的代码；
- 使用浏览器打开生成的travel_tips.html即可查看最终实现效果；
3.3 旅行规划页效果预览
4、案例体验：
4.1 旅行规划页：
http://lbs.amap.com/fn/iframe?path=mcp-server/example/customization
