高德地图MCP介绍和cursor接入编码示例(高德MCP)
文章目录
- 概述
- 链接
- 产品介绍
- 高德地图开放平台通用级 SSE 协议 MCP 服务解决方案
- 产品架构图
- 什么是 SSE?
- 产品特点
- 能力介绍
- 成为开发者并创建 Key
- 1、登录控制台
- 2、创建新应用
- 3、创建 Key
- 4、获取 Key
- 快速接入高德地图 MCP Server
- 1、SSE 方式接入 MCP 服务
- 1.1 安装 Cursor
- 1.2 进入 Cursor 设置界面配置 SSE 连接
- 1.3 添加一个新的 MCP Server 配置
- 1.4 返回 Cursor 设置界面查看 MCP 服务工具状态
- 1.5 选择配置 Cursor 大模型让你拥有更好的服务体验,建议选择 claude-3.7-sonnet(截至20250428)
- 1.6 模型交互模式 :选择 Agent 方式
- 1.7 开始使用
- 2、Node.js I/O 模式接入 MCP 服务
- 2.1 安装 Node.js
- 2.2 安装 Cursor
- 2.3 进入 Cursor 设置界面配置 MCP Server
- 2.4 添加一个新的 MCP Server 配置
- 2.5 返回 Cursor 设置界面查看 MCP 服务工具状态
- 如果我把这两个都配置进去,cursor怎么知道找哪个呢?
- 2.6 选择配置 Cursor 大模型让你拥有更好的服务体验,建议选择 claude-3.7-sonnet
- 2.7 模型交互模式 :选择 Agent 方式
- 2.8 开始使用
- 应用案例:专属旅行规划地图
- 1、案例介绍
- 2、案例体验:
- 2.1 旅行规划页:
- 2.2 专属旅行小程序:
- 3、Agent 需求描述:
- 3.1 大模型需求描述:
- 3.2 Cursor 模型交互过程
- 第一次模型交互
- 第二次模型交互
- 结果
- 完整代码
概述
链接
https://lbs.amap.com/api/mcp-server/summary
产品介绍
为实现LBS服务(基于位置服务)与LLM更好的交互,高德地图MCP Server支持12大核心服务接口,并已支持SSE协议。
同时,为打通旅行规划攻略 → 旅行工具,进一步提升用户行前、行中、行后出行体验,为出行领域开发者赋能,高德地图开放平台对MCP Server进行全新升级(专属旅行规划地图案例):
1、高德MCP Server 与高德地图APP深度联动:提供一键生成专属地图小程序、一键导航、一键打车等MCP Tools
2、为更便捷的生成旅行规划页,开发者可以使用高德MCP-Key,直接在旅行规划页中载入JS动态地图
高德地图开放平台通用级 SSE 协议 MCP 服务解决方案
产品架构图
什么是 SSE?
Server-Sent Events(SSE,服务器发送事件)是一种基于 HTTP 协议的技术,允许服务器向客户端单向、实时地推送数据。在 SSE 模式下,开发者可以在客户端通过创建一个 EventSource 对象与服务器建立持久连接,服务器则通过该连接持续发送数据流,而无需客户端反复发送请求。
产品特点
- 使用简单:适用普通用户基于MCP(SSE)方式,不必部署本地服务,简单通过 URL 地址配置即可使用。
- 自动升级:我们会持续进行迭代更新,无须用户自己任何额外操作使用。
- 更易于大模型理解:我们对原始的JSON结果进行了语义化的转换,更易于大模型理解内容。
- 零运维成本:采用全托管云服务架构,用户无需关心服务器维护、资源扩容等底层运维问题。
- 协议兼容:支持SSE长连接,适配不同业务场景的技术需求。
前往 快速接入 文档,了解如何接入 MCP Server SSE 服务
能力介绍
功能 | 描述 | 输入 | 输出 |
---|---|---|---|
生成专属地图小程序 | 将出行规划方案导入高德地图,生成专属(旅行)地图小程序 | 行程名称、行程详情(每日行程描述、行程途径点位) | 专属小程序跳转链接 |
导航到目的地 | 根据用户传入经纬度,启动导航 | 目的地经纬度 | 高德导航跳转链接 |
打车 | 根据用户输入起终经纬度坐标,发起打车请求 | origin (起点经纬度),destination (终点经纬度) | 高德打车唤端链接 |
地理编码 | 将详细的结构化地址转换为经纬度坐标 | address (位置信息),city (城市信息,非必须) | location (位置经纬度) |
逆地理编码 | 将一个高德经纬度坐标转换为行政区划地址信息 | location (位置经纬度) | addressComponent (位置信息,包括省市区等信息) |
IP 定位 | 根据用户输入的 IP 地址,定位 IP 的所在位置 | IP | province (省),city (城市),adcode (城市编码) |
天气查询 | 根据城市名称或者标准adcode查询指定城市的天气 | city (城市名称或城市adcode) | forecasts (预报天气) |
骑行路径规划 | 规划骑行通勤方案,最大支持 500km | origin (起点经纬度),destination (终点经纬度) | distance (规划距离),duration (规划时间),steps (规划步骤信息) |
步行路径规划 | 规划100km 以内的步行通勤方案 | origin (起点经纬度),destination (终点经纬度) | origin (起点信息),destination (终点信息),paths (规划具体信息) |
驾车路径规划 | 规划以小客车、轿车通勤出行的方案 | origin (起点经纬度),destination (终点经纬度) | origin (起点信息),destination (终点信息),paths (规划具体信息) |
公交路径规划 | 规划综合各类公共交通方式的通勤方案 | origin (起点经纬度),destination (终点经纬度),city (起点城市),cityd (终点城市) | origin (起点信息),destination (终点信息),distance (规划距离),transits (规划具体信息) |
距离测量 | 测量两个经纬度坐标之间的距离 | origin (起点经纬度),destination (终点经纬度) | origin_id (起点信息),dest_id (终点信息),distance (规划距离),duration (时间) |
关键词搜索 | 根据用户传入关键词,搜索相关的POI(兴趣点:Point of Interest)地点信息 | keywords (搜索关键词),city (查询城市,非必须) | suggestion (搜索建议),pois (地点信息列表) |
周边搜索 | 搜索指定坐标周围半径范围内的POI地点信息 | keywords (搜索关键词),location (中心点经度纬度),radius (搜索半径,非必须) | pois (地点信息列表) |
详情搜索 | 查询POI ID的详细信息 | id (关键词搜或周边搜获取的poiid) | 地点详情信息:location (地点经纬度),address (地址),business_area (商圈),city(城市),type (地点类型) 等 |
成为开发者并创建 Key
1、登录控制台
登录 高德开放平台控制台,如果没有开发者账号,请注册成为开发者。
2、创建新应用
进入【应用管理】,点击页面右上角【创建新应用】,填写表单即可创建新的应用。
3、创建 Key
进入【应用管理】,在我的应用中选择需要创建 Key 的应用,点击【添加 Key】,表单中的服务平台选择【Web 服务】。
4、获取 Key
创建成功后,可获取 Key 和安全密钥。
🈲 提示
为了对 Key 的安全有效管理,请妥善保管你的 Key。
快速接入高德地图 MCP Server
支持任意 MCP 协议的客户端(如:Cursor、Claude、Cline)可方便使用高德地图 MCP server。目前支持 MCP(SSE)和 Node.js I/O 两种接入方式,如下以 Cursor 平台为例
1、SSE 方式接入 MCP 服务
1.1 安装 Cursor
建议使用最新版本的 Cursor 客户端,安装 Cursor。
注意 请登录您的 Cursor 个人账户,以使用大模型功能
1.2 进入 Cursor 设置界面配置 SSE 连接
1.3 添加一个新的 MCP Server 配置
获取key
{"mcpServers": {"amap-amap-sse": {"url": "https://mcp.amap.com/sse?key=您在高德官网上申请的key"}}
}
1.4 返回 Cursor 设置界面查看 MCP 服务工具状态
☠ 提示 当出现 Client closed 异常时,可以点击 Enabled(启用) 按钮以解决问题,如下图所示:
1.5 选择配置 Cursor 大模型让你拥有更好的服务体验,建议选择 claude-3.7-sonnet(截至20250428)
1.6 模型交互模式 :选择 Agent 方式
按下 CTRL/CMD + L 快捷键,即可在编辑器右侧打开对话框
1.7 开始使用
了解如何使用高德 MCP 进行规划方案设计和地图可视化场景的生成,请参考 应用案例
2、Node.js I/O 模式接入 MCP 服务
2.1 安装 Node.js
下载适用于操作系统的 Node 应用程序
⚠ 提示
- 请确保已安装 Node.js,并检查本地 Node.js 版本是否为 v22.14.0 或更高版本。建议下载使用 v22.14.0 及以上版本以获得最佳兼容性和性能。
- 检查 npm 镜像源是否为默认镜像源(https://registry.npmjs.org/) 查看命令:
npm config get registry
2.2 安装 Cursor
建议使用最新版本的 Cursor 客户端,安装 Cursor。
⚠ 注意
请登录您的 Cursor 个人账户,以使用大模型功能
2.3 进入 Cursor 设置界面配置 MCP Server
2.4 添加一个新的 MCP Server 配置
获取key
{"mcpServers": {"amap-maps": {"command": "npx","args": ["-y", "@amap/amap-maps-mcp-server"],"env": {"AMAP_MAPS_API_KEY": "您在高德官网上申请的key"}}}
}
配置如下:
2.5 返回 Cursor 设置界面查看 MCP 服务工具状态
发现报错了:
查看日志:
2025-04-28 16:07:40.762 [info] maps: Handling ReloadClient action
2025-04-28 16:07:40.762 [warning] No workspace folders found, using current path for . expansion
2025-04-28 16:07:40.762 [info] maps: Starting new stdio process with command: npx -y @amap/amap-maps-mcp-server
2025-04-28 16:07:40.792 [error] maps: Client error for command spawn npx ENOENT
2025-04-28 16:07:40.792 [error] maps: Error in MCP: spawn npx ENOENT
2025-04-28 16:07:40.792 [info] maps: Client closed for command
2025-04-28 16:07:40.792 [error] maps: Error in MCP: Client closed
2025-04-28 16:07:40.792 [error] maps: Failed to reload client: MCP error -32000: Connection closed
2025-04-28 16:07:40.794 [info] maps: Handling ListOfferings action
2025-04-28 16:07:40.794 [error] maps: No server info found
说是npx命令不存在。
修复后就好了。
参考文章:vscode cmd跟windows cmd环境变量不一致!(vocode环境变量命令异常、命令不存在)(不知道怎么就弄好了???)vocode集成终端、mcp用不了、npx命令无效、版本不一致
⚠ 提示
当出现 Client closed 异常时,可以点击 Enabled(启用) 按钮以解决问题,如下图所示:
如果我把这两个都配置进去,cursor怎么知道找哪个呢?
{"mcpServers": {"amap-amap-sse": {"url": "https://mcp.amap.com/sse?key=XXX"},"amap-maps": {"command": "npx","args": ["-y","@amap/amap-maps-mcp-server"],"env": {"AMAP_MAPS_API_KEY": "XXX"}}}
}
好像不能同时配置两个,只能开一个,开多了会冲突,那就只开一个吧
当两个不同的MCP提供相同功能时,Cursor决定调用哪个接口主要基于以下几点:
优先级设置 - 系统可能在内部配置中为不同的MCP服务设置了优先级
函数名称的完整匹配 - 虽然功能相似,但函数名通常会包含提供商信息,如
mcp_amap-maps_maps_geo
明确指定了高德地图服务用户明确指定 - 如果用户在调用时明确指定了想使用的特定MCP服务接口
参数兼容性 - 系统会选择与提供参数最匹配的接口
默认路由规则 - 可能存在默认路由逻辑,决定在功能重叠时使用哪个服务
如果你需要确保调用特定MCP的接口,最好在代码中明确使用完整的函数名称,包括MCP提供商前缀。
2.6 选择配置 Cursor 大模型让你拥有更好的服务体验,建议选择 claude-3.7-sonnet
2.7 模型交互模式 :选择 Agent 方式
按下 CTRL/CMD + L 快捷键,即可在编辑器右侧打开对话框
2.8 开始使用
了解如何使用高德 MCP 进行规划方案设计和地图可视化场景的生成,请参考 应用案例
应用案例:专属旅行规划地图
1、案例介绍
五一计划到昆明游玩,使用AI+高德MCP制作4天旅行攻略,同时,生成专属地图小程序,将行前规划应用于旅行途中,满足行中探店、导航、打车等出行需求。
2、案例体验:
2.1 旅行规划页:
https://a.amap.com/jsapi_demo_show/static/feitian_data_view/kmlyes.html
2.2 专属旅行小程序:
https://surl.amap.com/qafG8TH10asC
3、Agent 需求描述:
在使用高德 MCP 服务之前,请务必确保您已按照 快速接入 完成了所有必要的配置步骤。
3.1 大模型需求描述:
##我五一计划去深圳游玩4天的旅行攻略。#帮制作旅行攻略,考虑出行时间和路线,以及天气状况路线规划。#制作网页地图自定义绘制旅游路线和位置。##网页使用简约美观页面风格,景区图片以卡片展示。#行程规划结果在高德地图app展示,并集成到h5页面中。##同一天行程景区之间我想坐地铁或打车前往。#生成文件名 kmTravel.html。
3.2 Cursor 模型交互过程
第一次模型交互
第二次模型交互
结果
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>深圳五一旅游攻略 - 4天游玩指南</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;}body {background-color: #f5f5f5;color: #333;line-height: 1.6;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}header {text-align: center;padding: 40px 0;background: linear-gradient(135deg, #1e88e5, #0d47a1);color: white;border-radius: 10px;margin-bottom: 30px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);}h1 {font-size: 2.5rem;margin-bottom: 10px;}h2 {font-size: 1.8rem;margin: 30px 0 15px;padding-bottom: 10px;border-bottom: 2px solid #1e88e5;}h3 {font-size: 1.4rem;margin: 25px 0 15px;color: #0d47a1;}p {margin-bottom: 15px;}.weather-container { /* 天气容器样式 */background-color: white; /* 背景色:白色 */border-radius: 10px; /* 边框圆角10像素 */padding: 20px; /* 内边距20像素 */margin-bottom: 30px; /* 下外边距30像素 */box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 阴影效果 */}.weather-days { /* 天气日期容器样式 */display: flex; /* 弹性布局 */flex-wrap: wrap; /* 允许项目换行 */justify-content: space-between; /* 项目之间平均分配空间 */margin-top: 15px; /* 上外边距15像素 */}.weather-day { /* 单日天气样式 */flex: 1; /* 弹性布局:平均分配空间 */min-width: 200px; /* 最小宽度200像素 */background-color: #f9f9f9; /* 背景色:更浅的灰色 */border-radius: 8px; /* 边框圆角8像素 */padding: 15px; /* 内边距15像素 */margin: 0 10px 10px 0; /* 上0,右10像素,下10像素,左0外边距 */text-align: center; /* 文字居中 */box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 轻微阴影效果 */}.weather-day h4 { /* 天气日期标题样式 */font-size: 18px; /* 字体大小18像素 */color: #1e88e5; /* 文字颜色:蓝色 */margin-bottom: 10px; /* 下外边距10像素 */}.cards { /* 卡片容器样式 */display: flex; /* 弹性布局 */flex-wrap: wrap; /* 允许项目换行 */gap: 20px; /* 项目之间的间隔20像素 */margin-top: 20px; /* 上外边距20像素 */}.card { /* 单个卡片样式 */flex: 1; /* 弹性布局:平均分配空间 */min-width: 300px; /* 最小宽度300像素 */background-color: white; /* 背景色:白色 */border-radius: 10px; /* 边框圆角10像素 */overflow: hidden; /* 超出部分隐藏 */box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 阴影效果 */transition: transform 0.3s ease; /* 变换过渡效果:0.3秒平滑 */}.card:hover { /* 卡片悬停状态样式 */transform: translateY(-5px); /* 上移5像素,产生悬浮效果 */}.card-img { /* 卡片图片容器样式 */height: 200px; /* 高度200像素 */overflow: hidden; /* 超出部分隐藏 */}.card-img img { /* 卡片内图片样式 */width: 100%; /* 宽度100%填充容器 */height: 100%; /* 高度100%填充容器 */object-fit: cover; /* 图片覆盖模式:保持纵横比裁剪填充 */transition: transform 0.5s ease; /* 变换过渡效果:0.5秒平滑 */}.card:hover .card-img img { /* 卡片悬停时图片样式 */transform: scale(1.05); /* 放大至1.05倍,产生缩放效果 */}.card-content { /* 卡片内容区样式 */padding: 20px; /* 内边距20像素 */}.card-title { /* 卡片标题样式 */font-size: 1.3rem; /* 字体大小:1.3倍根元素字体大小 */font-weight: bold; /* 字体粗细:粗体 */margin-bottom: 10px; /* 下外边距10像素 */color: #0d47a1; /* 文字颜色:深蓝色 */}.schedule { /* 行程安排容器样式 */background-color: white; /* 背景色:白色 */border-radius: 10px; /* 边框圆角10像素 */padding: 25px; /* 内边距25像素 */margin-bottom: 30px; /* 下外边距30像素 */box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 阴影效果 */}.day-schedule { /* 单日行程样式 */padding: 20px; /* 内边距20像素 */margin-bottom: 20px; /* 下外边距20像素 */background-color: #f9f9f9; /* 背景色:浅灰色 */border-radius: 8px; /* 边框圆角8像素 */border-left: 4px solid #1e88e5; /* 左侧边框:4像素实线蓝色,形成视觉重点 */}.transport-info { /* 交通信息样式 */background-color: #e3f2fd; /* 背景色:超浅蓝色 */padding: 15px; /* 内边距15像素 */border-radius: 8px; /* 边框圆角8像素 */margin-top: 15px; /* 上外边距15像素 */}.transport-info h4 { /* 交通信息标题样式 */color: #0d47a1; /* 文字颜色:深蓝色 */margin-bottom: 10px; /* 下外边距10像素 */}.map-container { /* 地图容器样式 */margin: 30px 0; /* 上下外边距30像素,左右0 */height: 500px; /* 高度500像素 */border-radius: 10px; /* 边框圆角10像素 */overflow: hidden; /* 超出部分隐藏 */box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影效果 */}.tips { /* 旅行小贴士样式 */background-color: #fffde7; /* 背景色:浅黄色 */padding: 20px; /* 内边距20像素 */border-radius: 10px; /* 边框圆角10像素 */margin-bottom: 30px; /* 下外边距30像素 */box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 阴影效果 */}.tips ul { /* 小贴士列表样式 */margin-left: 20px; /* 左外边距20像素 */}.tips li { /* 小贴士列表项样式 */margin-bottom: 10px; /* 下外边距10像素 */}.app-link { /* 应用链接按钮样式 */display: block; /* 块级元素 */text-align: center; /* 文字居中 */margin: 30px auto; /* 上下外边距30像素,左右自动实现居中 */padding: 15px 25px; /* 上下内边距15像素,左右25像素 */background-color: #1e88e5; /* 背景色:蓝色 */color: white; /* 文字颜色:白色 */text-decoration: none; /* 无文本装饰(去除下划线) */border-radius: 30px; /* 边框圆角30像素,实现胶囊形状 */font-weight: bold; /* 字体粗细:粗体 */font-size: 1.1rem; /* 字体大小:1.1倍根元素字体大小 */max-width: 400px; /* 最大宽度400像素 */box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 阴影效果 */transition: all 0.3s ease; /* 所有属性变化过渡效果:0.3秒平滑 */}.app-link:hover { /* 应用链接按钮悬停状态样式 */background-color: #0d47a1; /* 背景色变为深蓝色 */transform: translateY(-3px); /* 上移3像素,增强悬浮感 */box-shadow: 0 6px 16px rgba(0,0,0,0.2); /* 增强阴影效果 */}.app-link-container { /* 应用链接容器样式 */background-color: white; /* 背景色:白色 */border-radius: 10px; /* 边框圆角10像素 */padding: 25px; /* 内边距25像素 */margin-bottom: 30px; /* 下外边距30像素 */text-align: center; /* 文字居中 */box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 阴影效果 */}.app-link-container p { /* 应用链接容器内段落样式 */margin-bottom: 20px; /* 下外边距20像素 */font-size: 1.1rem; /* 字体大小:1.1倍根元素字体大小 */}footer { /* 页脚样式 */text-align: center; /* 文字居中 */padding: 20px; /* 内边距20像素 */margin-top: 50px; /* 上外边距50像素 */color: #666; /* 文字颜色:中灰色 */font-size: 0.9rem; /* 字体大小:0.9倍根元素字体大小 */}.qr-container { /* 二维码容器样式 */display: flex; /* 弹性布局 */justify-content: center; /* 水平居中 */margin: 20px 0; /* 上下外边距20像素,左右0 */}.qr-code { /* 二维码样式 */padding: 15px; /* 内边距15像素 */background-color: white; /* 背景色:白色 */border-radius: 10px; /* 边框圆角10像素 */box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 阴影效果 */text-align: center; /* 文字居中 */}.qr-code img { /* 二维码图片样式 */width: 200px; /* 宽度200像素 */height: 200px; /* 高度200像素 */margin-bottom: 10px; /* 下外边距10像素 */}.qr-code p { /* 二维码说明文字样式 */font-size: 0.9rem; /* 字体大小:0.9倍根元素字体大小 */color: #666; /* 文字颜色:中灰色 */}@media (max-width: 768px) { /* 媒体查询:当屏幕宽度小于等于768像素时应用以下样式 */.weather-day { /* 响应式天气卡片样式 */min-width: 45%; /* 最小宽度改为45%,一行放置两个 */}.card { /* 响应式景点卡片样式 */min-width: 100%; /* 最小宽度改为100%,一行放置一个 */}.map-container { /* 响应式地图容器样式 */height: 400px; /* 减小高度至400像素 */}}</style>
</head>
<body> <!-- 网页主体内容 --><div class="container"> <!-- 主容器,限制内容宽度并居中 --><header> <!-- 页头部分 --><h1>深圳五一旅游攻略</h1> <!-- 一级标题 --><p>四天精彩行程,尽享深圳魅力</p> <!-- 副标题/描述 --></header><section class="weather-container"> <!-- 天气信息区块 --><h2>五一期间深圳天气</h2> <!-- 二级标题 --><p>出行前了解天气情况,合理安排行程</p> <!-- 描述文字 --><div class="weather-days"> <!-- 天气信息卡片容器 --><div class="weather-day"> <!-- 第一天天气信息卡片 --><h4>5月1日 (星期四)</h4> <!-- 日期标题 --><p>白天: 雷阵雨</p> <!-- 白天天气 --><p>夜间: 阴</p> <!-- 夜间天气 --><p>温度: 27°C / 24°C</p> <!-- 温度范围 --><p>风力: 北风 1-3级</p> <!-- 风向和风力 --></div><div class="weather-day"> <!-- 第二天天气信息卡片 --><h4>5月2日 (星期五)</h4><p>白天: 多云</p><p>夜间: 多云</p><p>温度: 30°C / 24°C</p><p>风力: 北风 1-3级</p></div><div class="weather-day"> <!-- 第三天天气信息卡片 --><h4>5月3日 (星期六)</h4><p>预计: 多云</p><p>温度: 26°C ~ 31°C</p><p>建议: 带伞防雨,穿轻薄衣物</p></div><div class="weather-day"> <!-- 第四天天气信息卡片 --><h4>5月4日 (星期日)</h4><p>预计: 多云</p><p>温度: 25°C ~ 30°C</p><p>建议: 紫外线强,做好防晒</p></div></div></section><h2>景点介绍</h2> <!-- 景点介绍标题 --><div class="cards"> <!-- 景点卡片容器 --><div class="card"> <!-- 景点1卡片 --><div class="card-img"> <!-- 景点图片容器 --><img src="https://store.is.autonavi.com/showpic/69a69293b76f898ade20f230c00c9502" alt="深圳世界之窗"> <!-- 景点图片 --></div><div class="card-content"> <!-- 景点信息容器 --><div class="card-title">深圳世界之窗</div> <!-- 景点名称 --><p>深圳世界之窗是一个缩小版的世界知名建筑和自然景观主题公园,您可以在一天内环游世界,欣赏到埃菲尔铁塔、金字塔、泰姬陵等著名景点的复制品。</p> <!-- 景点描述 --><p>地址: 深南大道9037号</p> <!-- 景点地址 --></div></div><div class="card"> <!-- 景点2卡片 --><div class="card-img"><img src="https://store.is.autonavi.com/showpic/e1220e54d2b16f6187633ac20b3ce41a" alt="深圳欢乐谷"></div><div class="card-content"><div class="card-title">深圳欢乐谷</div><p>深圳欢乐谷是一个大型主题游乐园,拥有多种惊险刺激的游乐设施和精彩的表演,是深圳最受欢迎的游乐场所之一。</p><p>地址: 侨城西街18号</p></div></div><div class="card"> <!-- 景点3卡片 --><div class="card-img"><img src="https://store.is.autonavi.com/showpic/092258629d64ce0cd3c0069e7bebf2a6" alt="深圳市民中心"></div><div class="card-content"><div class="card-title">深圳市民中心</div><p>深圳市民中心是深圳的地标性建筑,由著名建筑师梁志天设计。它是政府办公和市民服务的中心,周边环境优美,是拍照留念的好地方。</p><p>地址: 福中三路</p></div></div><div class="card"> <!-- 景点4卡片 --><div class="card-img"><img src="https://store.is.autonavi.com/showpic/3de8d718ca9de653f37f64094b9bfc7c" alt="东部华侨城"></div><div class="card-content"><div class="card-title">东部华侨城</div><p>东部华侨城位于深圳东部,是一个集生态旅游、休闲度假、户外运动于一体的综合性旅游区,包括大侠谷、茶溪谷等景区,还有云海高空索道等惊险项目。</p><p>地址: 梅沙街道东海岸社区三洲田</p></div></div></div><h2>四天行程安排</h2> <!-- 行程安排标题 --><section class="schedule"> <!-- 行程安排容器 --><div class="day-schedule"> <!-- 第一天行程 --><h3>第一天 (5月1日): 深圳市民中心 → 世界之窗</h3> <!-- 日期和行程概述 --><p><strong>上午:</strong> 抵达深圳市民中心,欣赏这座地标性建筑,拍照留念。市民中心周边环境优美,可以在此休闲漫步。</p> <!-- 上午行程 --><p><strong>中午:</strong> 在附近的餐厅享用午餐。</p> <!-- 中午行程 --><p><strong>下午:</strong> 前往世界之窗,游览这个微缩世界,在一天内"环游世界",欣赏全球著名建筑的复制品。</p> <!-- 下午行程 --><p><strong>晚上:</strong> 晚餐后可以欣赏世界之窗的夜景和表演。</p> <!-- 晚上行程 --><div class="transport-info"> <!-- 交通信息容器 --><h4>交通方式: 地铁</h4> <!-- 交通方式标题 --><p>市民中心 → 世界之窗:</p> <!-- 起点到终点 --><p>乘坐地铁4号线(龙华线)从市民中心站到会展中心站,然后换乘地铁1号线(罗宝线)到世界之窗站,全程约30分钟。</p> <!-- 详细交通指引 --></div></div><div class="day-schedule"> <!-- 第二天行程 --><h3>第二天 (5月2日): 世界之窗 → 欢乐谷</h3><p><strong>上午:</strong> 可以继续游览世界之窗未游览完的景点,或在附近的华侨城品尝早餐。</p><p><strong>中午:</strong> 午餐后步行或乘坐公交前往深圳欢乐谷。</p><p><strong>下午:</strong> 在欢乐谷体验各种刺激的游乐设施,如过山车、跳楼机等。</p><p><strong>晚上:</strong> 欣赏欢乐谷的夜间表演和灯光秀。</p><div class="transport-info"><h4>交通方式: 步行或公交</h4><p>世界之窗 → 欢乐谷:</p><p>搭乘M486路公交从世界之窗站到欢乐谷站,约20分钟,然后步行约10分钟即可到达。也可以选择打车,车程约5分钟。</p></div></div><div class="day-schedule"> <!-- 第三天行程 --><h3>第三天 (5月3日): 欢乐谷 → 东部华侨城</h3><p><strong>上午:</strong> 在欢乐谷继续游玩未体验的项目。</p><p><strong>中午:</strong> 在欢乐谷内用午餐。</p><p><strong>下午:</strong> 前往东部华侨城,可以选择先游览大侠谷或茶溪谷。</p><p><strong>晚上:</strong> 在东部华侨城附近住宿,体验度假氛围。</p><div class="transport-info"><h4>交通方式: 地铁+公交</h4><p>欢乐谷 → 东部华侨城:</p><p>从欢乐谷步行至世界之窗地铁站,乘坐地铁2号线(8号线)到盐田港西站,然后换乘云海专线到大华兴寺停车场,全程约2.5小时。也可以选择打车直达,车程约1小时。</p></div></div><div class="day-schedule"> <!-- 第四天行程 --><h3>第四天 (5月4日): 东部华侨城游玩</h3><p><strong>全天:</strong> 在东部华侨城内游玩,体验云海高空索道、雨林飞驰等项目,欣赏大峡谷的自然风光。</p><p><strong>下午:</strong> 游览茶溪谷,了解茶文化。</p><p><strong>晚上:</strong> 结束行程,返回市区或直接离开深圳。</p></div></section><section class="app-link-container"> <!-- 高德地图应用链接容器 --><h2>在高德地图查看完整行程</h2> <!-- 标题 --><p>使用高德地图APP查看详细路线,轻松导航不迷路</p> <!-- 描述 --><a href="amapuri://workInAmap/createWithToken?polymericId=mcp_79d5bd0a0fa44639a44239780d404cdd&from=MCP" class="app-link">在高德地图中打开行程规划</a> <!-- 打开高德地图的深链接 --><div class="qr-container"> <!-- 二维码容器 --><div class="qr-code"> <!-- 二维码区块 --><img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=amapuri%3A%2F%2FworkInAmap%2FcreateWithToken%3FpolymericId%3Dmcp_79d5bd0a0fa44639a44239780d404cdd%26from%3DMCP" alt="高德地图行程码"> <!-- 二维码图片 --><p>扫码使用高德地图查看行程</p> <!-- 二维码说明 --></div></div></section><section class="tips"> <!-- 旅行小贴士容器 --><h2>旅行小贴士</h2> <!-- 标题 --><ul> <!-- 无序列表 --><li><strong>交通卡:</strong> 建议购买深圳通卡,方便乘坐公共交通工具。</li> <!-- 列表项:交通卡建议 --><li><strong>门票:</strong> 提前在网上预订门票可以享受折扣,并避免排队。</li> <!-- 列表项:门票建议 --><li><strong>防晒:</strong> 深圳五月天气较热,注意防晒、补水。</li> <!-- 列表项:防晒建议 --><li><strong>雨具:</strong> 五一期间可能有雷阵雨,建议携带雨伞或雨衣。</li> <!-- 列表项:雨具建议 --><li><strong>穿着:</strong> 建议穿着轻便舒适的衣物和运动鞋。</li> <!-- 列表项:穿着建议 --><li><strong>行李寄存:</strong> 主要景点都有行李寄存服务,可以轻装游玩。</li> <!-- 列表项:行李建议 --></ul></section><div class="map-container"> <!-- 地图容器 --><iframe src="https://uri.amap.com/marker?markers=114.059614,22.543673,深圳市民中心|113.972981,22.534662,深圳世界之窗|113.980295,22.54159,深圳欢乐谷|114.287666,22.626673,东部华侨城&src=mypage&callnative=1" width="100%" height="100%" frameborder="0" scrolling="no"></iframe> <!-- 嵌入高德地图iframe,标记了四个景点位置 --></div><footer> <!-- 页脚区域 --><p>© 2025 深圳五一旅游攻略 | 数据来源:高德地图</p> <!-- 版权信息和数据来源 --></footer></div><script> <!-- JavaScript代码区域 -->// 高德地图APIdocument.addEventListener('DOMContentLoaded', function() { // 当DOM内容加载完成后执行// 页面加载完成后的逻辑console.log('深圳五一旅游攻略页面加载完成'); // 在控制台输出页面加载完成的信息});</script>
</body>
</html>