高德地图MCP实战 | 在 cursor 中优雅地查询 POI 和天气

前言

最近热衷于找一些好玩的MCP,集成在cursor中,给大模型外挂许多有趣的功能,在开发的代码的同时,在IDE中可以获得更多的乐趣。例如:

  1. 什么是MCP?本地如何开发MCP Server
  2. MCP实战 | cursor 如何一句话操作 gitHub 代码库
  3. cursor 如何调用 MCP server 实现天气查询
  4. 自定义 MCP Server,在 cursor 中连接本地 MySQL 实现了统计分析
  5. Pages MCP Server + cursor,一句话完成旅游出行规划
  6. MCP实战 | cursor 中如何掌握股市动态
  7. Playwright MCP Server 使用指南:让 Cursor 拥有浏览器自动化能力
  8. Firecrawl MCP 实战 | 在 Cursor 中实现网页爬取、结构分析与信息提取

今天要实践的 MCP Server:Amap 高德地图,主要是用它来搜索poi数据的场景,还记刚毕业的时候,有获取poi数据的需求,当时就找了个网站进行爬取,之后想要更新数据再次爬取的时候,那个网站已经不可用了。

后来就用高德地图接口的每日配额,开发了一个程序坚持几个月获取完了poi数据。时至今日,MCP 的出现,让我们在IDE中也能获取poi数据,今天我就看看如何在cursor中获取poi数据。

配置

首先在高德地图开放平台创建key,创建的时候类型选择 Web服务

创建之后复制key,在 Cursor 的 Cursor Settings 中找到 MCP。

点击右侧上方的 Add new global MCP server 按钮,便自动打开 .local 目录下的 mcp.json 文件,替换 AMAP_MAPS_API_KEY 变量,并将 mcp server 的json信息粘贴进去。

{
  "mcpServers": {
    "amap-maps": {
      "command": "npx",
      "args": [
          "-y",
          "@amap/amap-maps-mcp-server"
      ],
      "env": {
          "AMAP_MAPS_API_KEY": "key"
      }
    }
  }
}

在MCP页面就可以看到配置的 mcp server 信息。

如上图所示:amap-maps 提供了很多tools。包括:

  1. maps_regeocode:通过经纬度进行逆地理编码(坐标转地址)。
  2. maps_geo:通过地址进行地理编码(地址转坐标)。
  3. maps_ip_location:根据 IP 定位地理位置。
  4. maps_weather:查询实时天气或天气预报。
  5. maps_search_detail:查询 POI(兴趣点)详细信息。
  6. maps_bicycling:规划骑行路线。
  7. maps_direction_walking:规划步行路线。
  8. maps_direction_driving:规划驾车路线。
  9. maps_direction_transit_integrated:公交换乘路线规划。
  10. maps_distance:计算两地之间的距离。
  11. maps_text_search:关键词搜索地点。
  12. maps_around_search:搜索周边地点。

其中 maps_search_detail 就是搜索 poi 的接口。

应用

通常我们输入搜索信息,amap-maps 调用的是 maps_text_search 来搜索地点。

如果我们输入一些poi的提示词,例如区县位置、坐标系,就会调用 maps_search_detail 工具,例如我们输入:

济南招商银行poi信息,包含区县、城市编码、三大坐标系坐标字段

这样,就获取了poi数据。

除了获取poi数据之外,还可以进行路线规划,amap-maps 还可以进行查询天气和规划路线等功能。

如图,调用了 maps_weather 接口查询了天气数据。

结语

amap-maps 是基于高德地图提供服务的 MCP Server,简化了用户调用高德地图 API 还要开发程序的工作。

### 配置高德地图中的 MCP 文件以更改鼠标 Cursor 样式 在高德地图中实现鼠标悬停时的样式效果,可以通过自定义 CSS JavaScript 来完成。尽管 `MCP` 是一种用于模型上下文协议的技术[^1],但在前端开发场景下,通常不直接涉及此类技术来调整鼠标的外观行为。 以下是具体方法: #### 方法概述 为了修改高德地图上的鼠标指针样式,可以利用 AMap API 提供的功能以及 HTML/CSS 的能力。通过监听事件并动态改变样式的手段,能够达到所需的效果。 --- #### 实现代码示例 以下是一个完整的代码片段,展示如何在高德地图上配置鼠标悬浮时的样式变化: ```javascript // 初始化地图实例 var map = new AMap.Map('container', { zoom: 10, // 设置地图缩放级别 center: [116.397428, 39.90923], // 设置中心点坐标 }); // 定义鼠标移入移出时的不同样式 function setCursorStyle(cursorType) { document.getElementById('container').style.cursor = cursorType; } // 添加覆盖物(例如标记) var marker = new AMap.Marker({ position: [116.397428, 39.90923], map: map, title: '测试标记' }); // 绑定鼠标事件到标记上 marker.on('mouseover', function () { setCursorStyle('pointer'); // 当鼠标移到标记上方时,显示手型光标 }); marker.on('mouseout', function () { setCursorStyle('default'); // 当鼠标离开标记区域时,恢复默认光标 }); ``` 上述代码实现了当用户将鼠标移动至指定的地图标记上时,自动切换为指向手势 (`pointer`);而当鼠标移开后,则返回默认状态(`default`)。 如果需要更复杂的交互逻辑或者加载外部资源作为自定义图标,还可以进一步扩展此功能。比如引入图片文件充当特殊形状的游标等操作。 --- #### 关键知识点解析 - **AMap.Event 类型支持多种内置事件**:包括但不限于 mouseover、click、dblclick 等常用动作捕捉机制[^2]。 - **CSS 属性控制视觉表现形式**:借助标准属性如 `-webkit-cursor`, 可轻松定制各类非传统图形化指示器[^3]. 注意,在某些情况下可能还需要考虑浏览器兼容性性能优化等问题. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值