手把手教你使用 mcp-server 生成高德地图旅游攻略并部署到 EdgeOne Pages

手把手教你使用 mcp-server —— vscode + 多款 MCP Server 实现高德地图旅游攻略生成并分享给其他人

Author：Gorit

Date：2025年4月24日

目标：看完这篇文章你就能学会如何使用调用高德地图 MCP Server 服务生成旅游攻略 以及 腾讯云 EdgeOne MCP Server 部署 HTML 并分享给其他人

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

项目地址

MCP Server 最佳实践

项目介绍

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

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

腾讯云 EdgeOne MCP Server：

• 实现

环境准备

环境要求：

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

MCP Server 配置

如何使用高德地图 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" 
          }  
      },
    "edgeone-pages-mcp-server": {
            "command": "npx",
            "args": [
                "edgeone-pages-mcp"
            ]
        }
  }
}

项目结构

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

使用步骤

1. 首先需要在高德开放平台注册账号并创建应用，获取 API Key
2. 打开 Github Copilot 对话框，选择 agent 模式，选择 Claude 3.5 Sonnet，可以进行如下操作：
3. 将生成的 HTML 文档部署至 EdgeOne Pages 上；

高德地图提示词示例：

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

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

部署至 EdgeOne 提示词示例：

请帮我将 gaode目录下的 #file:index.html 部署至 腾讯云 EdgeOne 上

然后可以愉快的访问了：https://mcp.edgeone.site/share/MsTgBgPmvLg7ygaFKHkA5

PS：要使用 agent 模式才会调用工具~

支持的功能

本项目支持以下高德地图 MCP Server 服务：

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

腾讯云 EdgeOne MCP Server 服务：

• 将本地的静态 HTML 部署至 EdgeOne Pages 并返回公网可访问的地址

注意事项

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

License

MIT