手把手教你使用 mcp-server —— vscode + 实现高德地图 MCP 生成旅游攻略

手把手教你使用 mcp-server —— vscode + 多款 MCP Server 实现高德地图 Web API 服务调用 Author：Gorit Date：2025年4月23日

目标：看完这篇文章你就能学会如何使用 mcp-server 调用高德地图 Web API 服务！

免责声明：本仓库所有代码示例仅用于学习交流，请勿用于商业用途！！！

项目地址

MCP Server 最佳实践

项目介绍

本项目使用 vscode 和多个 MCP Server 实现了高德地图 Web API 服务的调用示例，主要功能包括：

• 地理编码（地址转换为经纬度）
• 逆地理编码（经纬度转换为地址）
• 路线规划（驾车、步行、骑行、公交）
• 周边搜索
• 关键字搜索
• 天气查询
• IP定位

环境准备

环境要求：

• Mac 15.4.1
• VSCode 1.99 版本（或者其他支持 mcp-server 的客户端，比如 Cursor 等）
• Github 账号（已开通 Copilot, 模型选择：Claude 3.5 Sonnet）
• VSCode 已安装 Github Copilot
• Node.js 版本 >= 20.0
• NPX 支持（需要自行切换 npm 镜像或解决网络问题）

MCP Server 配置

创建一个空项目，然后在项目根目录下创建 .vscode/mcp.json 文件，配置如下内容：

{
  "servers": {
      "filesystem": {
        "command": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-filesystem",
          "/Users/gorit/Documents/code",
          "/Users/gorit/Documents/devlopment"
        ]
      },
      "amap-maps": { 
        "command":"npx", 
        "args": [ "-y", "@amap/amap-maps-mcp-server"], 
        "env": { 
          "AMAP_MAPS_API_KEY":"你在高德地图上申请的 API Key" 
          }  
      },
  }
}

项目结构

.
├── README.md           # 项目说明文档
├── index.html         # 高德地图演示页面
└── .vscode/           # VSCode 配置目录
    └── mcp.json       # mcp服务配置

使用步骤

1. 首先需要在高德开放平台注册账号并创建应用，获取 API Key
2. 打开 Github Copilot 对话框，选择 agent 模式，选择 Claude 3.5 Sonnet，可以进行如下操作：

提示词示例：

在 gaode目录中，帮我用 HTML + Tailwind css + js 和 高德地图 MCP Server 生成一份 恩施两天 一夜的游玩攻略，要求第一天于 5 月 2 号上午 9 点 搭乘动车到恩施，去土司城 和 女儿城游玩，住宿。第二天去恩施大峡谷，游玩完毕回武汉的攻略

补充说明：
请推荐合适的酒店信息，并且我有旅游年卡，查询下门票是否免费，已经通勤方式；页面不够美观，请继续美化；

支持的功能

本项目支持以下高德地图 Web API 服务：

• 地理编码服务（将详细的结构化地址转换为经纬度坐标）
• 逆地理编码服务（将经纬度坐标转换为结构化地址）
• 路径规划服务
  • 驾车路径规划
  • 步行路径规划
  • 公交路径规划
  • 骑行路径规划
• 搜索服务
  • 关键字搜索
  • 周边搜索
• 天气查询服务
• IP定位服务

注意事项

1. 确保网络连接稳定
2. 注意 API 调用频率限制
3. 请勿将 API Key 提交到代码仓库
4. 遵守高德地图服务使用条款

运行结果

测试效果请查看以下截图：

License

MIT