Cursor + 高德MCP, 十分钟搞定五一自驾路线推荐,并搞定大前端

360影视 欧美动漫 2025-05-26 00:28 1

摘要:我五一假期想去广州附近自驾游, 你能帮我使用高德MCP,帮我推荐自驾路线嘛。我有以下几个条件:1、自驾游的起点和终点都是在广州2、五天的假期,不希望路程太赶, 节奏可以慢一些3、我想多看看自然景观,不需要太多人文景观4、我想看看山,看看河,看看海, 类似于名山

使用 edgeone-pages-mcp-server 部署:

mcp.edgeone.site/share/xTA93…

1、获取高德MCP

打开高德开放平台

填写手机号之后,选择支付宝认证:

个人秒审核通过,然后登录去控制台添加应用和 Key。

服务平台选择 Web服务, 白名单先不填

创建成功后就生成了KEY, 接下来我们将这个KEY配置到Cursor中。

2、Cursor 配置高德MCP

点击 Cursor的 设置 , 点击MCP,点击新增 MCP服务

接着在你的编辑框中输入:

{ "mcpServers": { "amap-amap-sse": { "url": "https://mcp.amap.com/sse?key=你申请的key" } }}

输入完成后, 就可以看到高德MCP服务配置成功了

3、自驾路线推荐

首先先编写 我们的 prompt:

我五一假期想去广州附近自驾游, 你能帮我使用高德MCP,帮我推荐自驾路线嘛。我有以下几个条件:1、自驾游的起点和终点都是在广州2、五天的假期,不希望路程太赶, 节奏可以慢一些3、我想多看看自然景观,不需要太多人文景观4、我想看看山,看看河,看看海, 类似于名山大川,山河湖海吧5、我想避开五一假期期间,游客量很大的景点6、我想路过一些美食区, 吃一些地方特色你能帮我推荐符合这些要求的自驾路线嘛

扔给Cursor

之后可以看到 Cursor调用了高德的MCP服务,并生成了结果:

然后根据我们让Cursor 新建一个 md文件,将攻略写入新建的md文件中

来看看Cursor 生成的结果:

# 广州周边五日自驾游攻略根据您的需求,我为您设计了一条五天四晚的广州周边自驾游线路,兼顾山水湖海的自然风光,并尽量避开五一假期最拥挤的景点。## 第一天:广州 → 肇庆鼎湖山(约108公里,2小时车程)**上午**:从广州出发,沿S8广佛肇高速前往肇庆鼎湖山。**下午**:游览鼎湖山风景名胜区,这里是国家级自然保护区,森林覆盖率高,有"南国第一山"之称。**推荐美食**:鼎湖上素、裹蒸粽、肇庆裹蒸**住宿**:肇庆市区或鼎湖山附近酒店## 第二天:肇庆 → 韶关丹霞山(约303公里,4.5小时车程)**上午**:从肇庆出发,前往韶关丹霞山。**下午**:游览中国丹霞山世界地质公园,这里是世界自然遗产,因奇特的红色砂岩地貌而闻名,有"奇峰异石、丹崖赤壁"的美誉。**推荐景点**:长老峰、阳元石、巴寨等景区**推荐美食**:丹霞山笋干、韶关狗肉煲**住宿**:丹霞山景区内或附近民宿## 第三天:丹霞山深度游**全天**:在丹霞山进行深度游览,可以选择水上丹霞项目,乘坐竹筏欣赏不同角度的丹霞地貌。**推荐活动**:- 早晨可在山顶观日出- 徒步探索丹霞地貌- 体验水上丹霞游览**住宿**:继续住在丹霞山或韶关市区## 第四天:韶关 → 阳江海陵岛(约523公里,7小时车程)**上午**:早起从丹霞山出发,经S14汕湛高速和S51肇阳高速前往阳江海陵岛。**下午/晚上**:抵达海陵岛大角湾海上丝路旅游区,欣赏海岛风光,放松心情。**推荐景点**:大角湾、东方银滩**推荐美食**:海鲜大餐、阳江腌面**住宿**:海陵岛酒店或民宿## 第五天:海陵岛 → 广州(约296公里,4小时车程)**上午**:在海陵岛享受海滩时光,体验海岛休闲活动。**中午**:享用午餐后,踏上返程路线。**下午**:返回广州,结束五日自驾游。## 行程特点:1. **自然景观丰富**:涵盖了山(鼎湖山、丹霞山)、河(流溪河)、海(海陵岛)等多种自然景观。2. **节奏宽松**:行程安排合理,每日驾驶时间控制在2-7小时之间,避免过于赶路。3. **避开热门景点**:选择的景点虽然知名但相对分散,比起五一期间的黄金海岸、长隆等地人流要少。4. **美食体验**:路线途经多个具有特色美食的地区,可品尝到粤菜、客家菜和海鲜等多种风味。## 出行建议:1. 五一期间出行请提前预订住宿和景点门票2. 准备防晒、防虫、雨具等必备物品3. 关注天气预报,调整行程4. 丹霞山到海陵岛路程较长,可考虑中途在阳江市区或茂名休息一晚## 路线图:广州 → 肇庆鼎湖山 → 韶关丹霞山 → 阳江海陵岛 → 广州总行程约1230公里,覆盖山川湖海的自然风光。

这里只做演示, 具体对Cursor生成的路线不满意的话, 可以让Cursor接着进行调整,直到调整满意为止。

4、使用自驾路线

1、根据自驾路线生成网页

首先编写prompt:

根据这份自驾攻略, 并结合高德MCP, 能帮我生成一个自驾游路线的网页嘛。新建一个Web的文件夹, 并将生成的网页内容放置在Web文件夹下面。 要求在网页中显示地图, 将自驾路线, 住宿,餐饮信息等信息标注在地图上。

生成结果:

生成的网页, 可以看到, 可以看到每天的路线图, 也可以看到总的路线图。下面也显示了推荐的美食和住宿。

如果去自驾的话,看网页不方便。 用手机看专属APP和小程序方便一些。 我们接下来可以用Cursor和高德MCP 试着生成APP 和 微信小程序

2、根据自驾路线生成APP

这次生成APP的技术栈,我们使用Flutter, 既可以在Andorid上运行, 也可以在ios上运行。 为方便起见, 在Android手机上看效果。

首先编写prompt:

根据这份自驾攻略, 并结合高德MCP, 能帮我生成一个专属自驾游路线的APP嘛。使用Flutter 技术栈, 支持在Android 和iOS端双端运行,新建一个Flutter 的文件夹, 并将生成的Flutter APP代码放在这个文件夹下面。 要求在APP中显示地图, 将自驾路线, 住宿,餐饮信息等信息标注在地图上, 并增加定位功能。 页面做的尽量美观一些, 使用Material Design 风格。

如果你觉得专门为了这次自驾做个APP有点重, 没关系。我们可以试着生成一个微信小程序, 生成二维码。微信扫码即可打开。

3、根据自驾路线生成微信小程序

根据这份自驾攻略, 并结合高德MCP, 能帮我生成一个自驾游路线的微信小程序嘛。 新建一个Mini_Program的文件夹, 并将生成的小程序代码放置在这个文件夹下面。 要求小程序显示地图, 将自驾路线, 住宿,餐饮信息等信息标注在地图上。

生成效果:

可以看到地图组件帮我们用了微信小程序的 地图组件, 如果想换成高德地图的小程序组件,可以新建高德小程序的应用,生成KEY, 让Cursor 帮忙接入到这个小程序中

5、总结

1、 AI Agent 和 MCP结合确实可以做各种各样的事情。最近看到的 用高德MCP实现路径规划, 通过 Figma, Mastgo MCP 根据设计稿出静态UI代码。 通过Github MCP 实现Git操作等等等等。 扩展了AI Agent 的边界。

2、 以本次自驾路径为切入点。 我们根据 高德MCP提供的自驾攻略信息, 实现了 Web, Flutter(Android , ios) , 微信小程序, 基本涵盖了大前端的内容。 作为一个大前端的开发人员, 深感震撼。

3、AI Agent, Cursor 冲击的不仅仅是前端UI仔。 后端 curd boy也会收到冲击。 这次只是让生成 小程序,APP和网页, 下次也可以让他生成 JAVA + SSM + MySQL, Python + Flask + Orcale 等等。

4、 在日常的开发工作中, 除了用好 这些工具, 更多的还是要思考,随着大模型的不断发展, MCP服务如雨后春笋般涌现。自己开发和这些工具开发有什么区别,有什么差异点, 怎么才不会被这些工具取代。这才是值得每个开发人员,值得思考的。

来源:墨码行者

相关推荐