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

最新推荐文章于 2025-05-06 12:52:15 发布

Gorit

最新推荐文章于 2025-05-06 12:52:15 发布

阅读量871

点赞数 23

分类专栏： AI 文章标签： vscode AI MCP

本文链接：https://blog.csdn.net/caidewei121/article/details/147466047

版权

AI 专栏收录该内容

4 篇文章

订阅专栏

手把手教你使用 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服务配置

使用步骤

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

提示词示例：

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

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