利用高德地图和小红书MCP生成旅行规划页面

发布时间：2025-07-01 15:32

利用高德地图规划自驾线路 #生活技巧# #自驾游建议# #自驾游旅友交流平台#

利用高德地图和小红书MCP生成旅行规划图转存失败，建议直接上传图片文件最近网上有很多关于MCP实战的例子，我也非常感兴趣，照着网上最火的旅游规划实践例子，也玩了一下，确实非常有趣和方便，下面介绍利用高德地图和小红书MCP生成旅游规划网页的详细步骤

首先感谢AI产品自由写的攻略文档AI + 高德MCP：10分钟搞定一份旅行攻略！,本篇是在这个文档的基础上，再锦上添花优化一下配置的步骤

一、前期准备

最新版本的 Node.js（v18 或更新版本）通过运行检查：node --version 从以下网址安装：nodejs.org/ 最新版本的 Python（v3.8 或更新版本）通过运行检查：python --version 从以下网址安装：python.org/ UV 包管理器安装 Python 后，运行：pip install uv 通过运行验证：uv --version 高德地图开放平台注册并认证成为开发者进入控制台后，找到应用管理，创建新应用添加两种key，一个是web服务类型，一个是web端类型科学上网（你懂的）

macOS系统，装了python后，命令行要加版本号，比如pip3 install uv

二、安装MCP

市面的主流的编辑器或者插件都能支持MCP，这里我用vscode的cline插件为例，来说明这个实践例子中，安装MCP的具体步骤

MCP库网站推荐：mcp.so/

安装高德地图MCP

安装页面：pypi.org/project/ama… 安装命令：pip install amap-mcp-server or pip3 install amap-mcp-server cline插件添加高德MCP：

记得用前期准备建好的Web服务的key

{ "mcpServers": { "amap-mcp-server": { "command": "uvx", "args": [ "amap-mcp-server" ], "env": { "AMAP_MAPS_API_KEY": "高德Web服务的key" } } } }

安装小红书MCP

小红书MCP介绍

安装依赖

git clone git@github.com:jobsonlook/xhs-mcp.git cd xhs-mcp uv sync

如果ssh clone有问题，也可以用git clone https://github.com/jobsonlook/xhs-mcp.git

cline插件添加小红书MCP

{ "mcpServers": { "xhs-mcp": { "command": "uv", "args": [ "--directory", "小红书mcp项目的路径", "run", "main.py" ], "env": { "XHS_COOKIE": "xxxx" } } } }

小红书mcp项目的路径的获取分系统

macOS: 选中刚才clone下来的小红书的mcp目录，快捷键Option+Command+C，就可以复制当前目录的路径，然后直接粘贴即可 windows：比如你放在G盘的根目录下，那么路径就是G:\\xhs-mcp,记录路径分割线用\\ 获取小红书cookie 打开小红书web端登陆小红书web端转存失败，建议直接上传图片文件

登陆成功后，按F12，或鼠标右键检查，打开控制台，然后刷新一下页面选择Network选项，然后筛选处选Fetch/XHR,任意选择一个请求，点击后查看里面的Cookies，复制到配置中的XHS_COOKIE

小红书Cookie获取转存失败，建议直接上传图片文件

检测MCP是否安装成功

直接cline提问即可，比如你直接提问，看看是否能成功调用mcp服务即可

根据小红书mcp，获取关于海贼王的最热门的前5个帖子根据高德地图mcp，获取广州塔的具体经纬度

同时mcp服务如果运行正常，插件也会有类似的绿色提示

MCP转存失败，建议直接上传图片文件

三、生成规划旅行网页

参考AI产品自由写的提示词：旅行规划提示词，我在原有提示词上做了更新

新建提示词文档

在项目根目录新建提示词.md的markdown文件，粘贴以下内容

# 风格说明你是一位国际顶尖的数字杂志艺术总监和前端开发专家，曾为Vogue、Elle等时尚杂志设计过数字版面，擅长将奢华杂志美学与现代网页设计完美融合，创造出令人惊艳的视觉体验。请设计高级时尚杂志风格的手机app旅行攻略，将旅行信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。 **可选设计风格：** 构成主义风格 (Constructivism) 采用构成主义风格设计，体现20世纪早期俄国前卫艺术运动的革命性美学。必须使用大胆的几何形状和对角线元素创造动态张力，强调结构与构成。色彩应限制在红、黑两色为主，可辅以少量白色或灰色，体现革命色彩。排版是关键元素，文字应成为设计的一部分而非简单的内容载体，可使用不同大小、粗细和方向的文字创造视觉层次，标题应大胆且具冲击力，可斜向排列或分割成多行。必须使用几何形状如三角形、圆形、直线和对角线作为主要视觉元素，这些元素应相互重叠和交织。照片或图像应使用锐利的对比度和几何化处理，可使用照片蒙太奇技术。整体构图应不对称且充满张力，仿佛元素间存在力的相互作用。可添加工业元素如齿轮、工厂或机械部件的抽象表现。整体设计应呈现出前卫、动态且具有政治宣传性质的视觉效果，参考亚历山大·罗德琴科(Alexander Rodchenko)和埃尔·利西茨基(El Lissitzky)的海报设计，体现"艺术进入生活"的设计理念。 **每种风格都应包含以下元素，但视觉表现各不相同：** 1. **行程标题区**： - 目的地名称（主标题，醒目位置） - 旅行日期和总天数 - 旅行者姓名/团队名称（可选） - 天气信息摘要 2. **行程概览区**： - 按日期分区的行程简表 - 每天主要活动/景点的概览 - 使用图标标识不同类型的活动 3. **详细时间表区**： - 以表格或时间轴形式呈现详细行程 - 包含时间、地点、活动描述 - 每个景点的停留时间 - 标注门票价格和必要预订信息 4. **交通信息区**： - 主要交通换乘点及方式 - 地铁/公交线路和站点信息 - 预计交通时间 - 使用箭头或连线表示行程路线 5. **住宿与餐饮区**： - 酒店/住宿地址和联系方式 - 入住和退房时间 - 推荐餐厅列表（标注特色菜和价格区间） - 附近便利设施（如超市、药店等） 6. **实用信息区**： - 紧急联系电话 - 重要提示和注意事项 - 预算摘要 - 行李清单提醒 # 示例内容（基于上海一日游） **目的地**：上海一日游 **日期**：2025年3月30日（星期日） **天气**：阴，13°C/7°C，东风1-3级 **时间表**： | 时间 | 活动 | 地点 | 备注 | |------|------|------|------| | 09:00-11:00 | 游览豫园 | 福佑路168号 | 门票：40元 | | 11:00-12:30 | 城隍庙午餐 | 城隍庙商圈 | 推荐：南翔小笼包 | | 13:30-15:00 | 参观东方明珠 | 世纪大道1号 | 门票：80元起 | | 15:30-17:30 | 漫步陆家嘴 | 陆家嘴金融区 | 免费活动 | | 18:30-21:00 | 黄浦江夜游 | 码头位置 | 夜游票：120元 | **交通路线**： - 豫园→东方明珠：地铁14号线（豫园站→陆家嘴站），约25分钟 - 东方明珠→黄浦江夜游码头：步行15分钟 **实用提示**： - 携带雨伞，天气多变 - 避开东方明珠午间高峰 - 准备移动支付 - 注意保管随身物品 **重要电话**： - 旅游咨询：021-12301 - 紧急求助：110/120 **小红书攻略推荐** - 搜索和旅行规划主题相关的观看人数最多的5篇小红书文章，并列举出来请创建一个美观且易于在手机上浏览的旅行规划长图，帮助用户清晰了解整个行程安排。长图设计应确保在手机上阅读舒适，信息层次分明。 # 技术规范： * 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript * Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css) * Tailwind CSS: [https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css](https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css) * 中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap) * 确保代码简洁高效，注重性能和可维护性 * 使用CSS变量管理颜色和间距，便于风格统一 # 输出要求： * 提供一个完整的HTML文件，包含所有设计风格的卡片 * 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求 * 网页应使用响应式布局，在web端和移动端都有良好的视觉效果 * 行程的规划需要根据用户提供的时间的对应的天气信息进行规划，比如下雨天就尽量安排室内活动 * 每一个地点需要利用高德地图的MCP生成地点链接，点击后可以直接跳转到高德地图导航 * 每一天的时间行程需要增加一个高德地图的在线预览，将当前天的所有行程地图连接起来，方便查看今日行程，利用高德地图的js api，直接在网页上显示，不需要跳转 * 小红书的文章要给出具体帖子的链接，不需要搜索的链接 * 设计的宽度根据手机宽度自适应 * 永远用中文输出 * 注意文字的可阅读性，保持文字背景干净和字体颜色不一致 * 保证信息的完整性请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的手机app旅行攻略，让用户感受到"这不是普通的信息卡片，而是一件可收藏的数字艺术品"。