【Cursor实战】使用Cursor+高德MCP成为行程规划达人

最新推荐文章于 2025-04-29 00:10:28 发布

小溪彼岸

最新推荐文章于 2025-04-29 00:10:28 发布

阅读量126

点赞数

分类专栏： AI编辑器 AIGC 文章标签： Cusor AI编辑器 Cursor实战

原文链接：https://mp.weixin.qq.com/s/uq4XhHng9xwE-HoWSsgLcA

版权

AIGC 同时被 2 个专栏收录

55 篇文章

订阅专栏

AI编辑器

23 篇文章

订阅专栏

前言

随着MCP的爆火，各大地图厂商也对MCP下手了，相继提供了对应的MCP服务。今天以高德MCP为例，感受下AI与MCP带来的激情碰撞。

Cursor版本

当前Cursor版本：0.45.14，建议使用Cursor 0.48版本并开启auto-run模式

优势

每天有免费体验额度，可以满足个人学习调用

高德地图MCP

高德地图MCP简介

高德地图 MCP Server 为实现 LBS 服务与 LLM 更好的交互而诞生，现已覆盖12大核心服务接口，提供全场景覆盖的地图服务，包括地理编码、逆地理编码、IP 定位、天气查询、骑行路径规划、步行路径规划、驾车路径规划、公交路径规划、距离测量、关键词搜索、周边搜索、详情搜索等。

注册高德账号

官网地址：https://lbs.amap.com/

在这里插入图片描述

在高德地图官网点击注册，安装引导步骤完成开发者注册

在这里插入图片描述

个人学习使用选择【个人认证开发者】即可

在这里插入图片描述

填写邮箱认证和支付宝认证后，点击【提交材料】

在这里插入图片描述

申请API Key

高德MCP服务需要API Key授权，进入高德控制台->【应用管理】->【我的应用】->【创建新应用】->填写应用信息，点击【新建】

在这里插入图片描述

创建应用后，点击应用的【添加Key】填写Key名称，服务平台选择【Web服务】

在这里插入图片描述

添加完成后即可得到一个API Key，复制备用

在这里插入图片描述

基础服务配额

高德MCP每天有对应服务的调用次数限制，超出限制后将会被拒绝

在这里插入图片描述

Cursor配置高德MCP

我们可以到高德官网或者 mcp.so 等平台获取高德MCP的介绍和配置。

mcp.so：https://mcp.so/

进入mcp.so可以看到第一个就是高德MCP的介绍

在这里插入图片描述

进入Amap Maps详情，选择【Content】可以看到接入配置

在这里插入图片描述

这里只有一个接入方式，官方提供了command 和 sse 两种接入方式

官方MCP文档：https://lbs.amap.com/api/mcp-server/gettingstarted#s1

在这里插入图片描述

command方式

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

sse方式

{
  "mcpServers": {
    "amap-amap-sse": {
      "url": "https://mcp.amap.com/sse?key=在高德官网上申请的key"
    }
  }
}

这里以Cursor 0.45版本的sse方式为例进行接入

https://mcp.amap.com/sse?key=在高德官网上申请的key

在Cursor配置中找到MCP Servers，点击【Add new MCP server】创建一个MCP连接，输入MCP名称，类型选择【sse】，输入高德MCP SSE服务地址，记得key换成上面申请的高德API Key

在这里插入图片描述

配置完成后，等待MCP服务状态变为绿色即为连接成功

在这里插入图片描述

基本使用

使用高德MCP的前置条件准备完成后，就可以在Cursor中进行测试了。

线路规划

北京通州北关到天安门的路线规划

在这里插入图片描述

天气查询

告诉我下周北京朝阳区天气

在这里插入图片描述

美食推荐

北京青年路地铁站附近有什么好吃的餐馆推荐

在这里插入图片描述

出行规划案例

下面我们将以出行规划为例，实现一个可视化的旅行规划

第一步：制定计划

请帮我规划五一从北京到天津旅游的路线，根据天气合理安排出行，注意保持旅途的轻松愉悦

在这里插入图片描述

五一只给我规划3天了，后面2天想让我休息吗🧐，人还怪好呢。暂时这样吧，有需要的小伙伴可以让AI调整。

第二步：出行线路可视化

将制定的计划输出到HTML文件中，样式使用tailwindcss并结合大厂设计风格进行美化

在这里插入图片描述

双击【index.html】在浏览器打开预览，除了景点图片有问题其他的看着挺好。

在这里插入图片描述

将问题发给Cursor，看Cursor能否解决

在这里插入图片描述

Cursor没有找到合适可用的图片，直接使用标签绘制了出来🥶，也还行吧

在这里插入图片描述

最终实现效果如下：

在这里插入图片描述

第三步：部署到云服务

这里我们还是上传到yourware平台，对yourware还不了解的小伙伴可以看往期内容：【Cursor实战】如何快速实现3D动画效果

yourware官网地址：https://www.yourware.so

在这里插入图片描述

上传完成后，我们将拥有一个可供分享查看的网页行程规划应用，完整效果：https://94z2e46tbq.app.yourware.so/

在这里插入图片描述

项目地址

项目放到Github了，感兴趣的小伙伴可以自行玩耍

Github地址：https://github.com/MisterZhouZhou/cursor-amap-travel

友情提示

见原文：【Cursor实战】使用Cursor+高德MCP成为行程规划达人