当前位置: 首页 > ds >正文

高德地图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 的所在位置IPprovince (省),city (城市),adcode (城市编码)
天气查询根据城市名称或者标准adcode查询指定城市的天气city (城市名称或城市adcode)forecasts (预报天气)
骑行路径规划规划骑行通勤方案,最大支持 500kmorigin (起点经纬度),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 应用程序

在这里插入图片描述

⚠ 提示

  1. 请确保已安装 Node.js,并检查本地 Node.js 版本是否为 v22.14.0 或更高版本。建议下载使用 v22.14.0 及以上版本以获得最佳兼容性和性能。
  2. 检查 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决定调用哪个接口主要基于以下几点:

  1. 优先级设置 - 系统可能在内部配置中为不同的MCP服务设置了优先级

  2. 函数名称的完整匹配 - 虽然功能相似,但函数名通常会包含提供商信息,如mcp_amap-maps_maps_geo明确指定了高德地图服务

  3. 用户明确指定 - 如果用户在调用时明确指定了想使用的特定MCP服务接口

  4. 参数兼容性 - 系统会选择与提供参数最匹配的接口

  5. 默认路由规则 - 可能存在默认路由逻辑,决定在功能重叠时使用哪个服务

如果你需要确保调用特定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> 
http://www.xdnf.cn/news/3012.html

相关文章:

  • AWS SQS 队列策略配置指南:常见错误与解决方案
  • 【计算机视觉】深度解析MediaPipe:谷歌跨平台多媒体机器学习框架实战指南
  • 在开发板上如何处理curl: (60) SSL certificate problem
  • 微服务架构下的熔断与降级:原理、实践与主流框架深度解析
  • CentOS一键安装MySQL5.7(源码安装)
  • matplotlib饼图练习
  • 通过 Node.js 搭配 Nodemailer 实现邮箱验证码发送
  • 五、UI自动化测试05--PyTest框架
  • grafana/loki 设置日志保留时间
  • Cursor —— AI编辑器 使用详解
  • 【动态导通电阻】 GaN PiN二极管电导调制对动态 RON 的影响
  • 从Windows开发迁移到信创开发的指南:国产替代背景下的技术路径与实践
  • Webshell管理工具的流量特征
  • 桂链:使用Fabric的测试网络
  • 043-代码味道-循环依赖
  • LeetCode58_最后一个单词的长度
  • QT控件 参考Qt的PIMPL设计模式实现使用QWidget控件绘制3D饼状图表和3D柱状图表,使用QChartView绘制圆柱体图表
  • CORS跨域学习
  • opencv 模板匹配
  • [USACO08DEC] Hay For Sale S Java
  • React Native 太慢:kotlin-gradle-plugin-2.0.21-gradle76.jar 下载太慢
  • Code Complete代码大全20年纪念版附录书籍等
  • 归并排序排序总结
  • 某高端制造企业知识中枢升级,基于悦数 Graph RAG 打造工业级「故障排查最强大脑」
  • OceanBase数据库-学习笔记5-用户
  • 《系统分析师-第三阶段—总结(七)》
  • C++入门(缺省参数/函数/引用)
  • 组件轮播与样式结构重用实验
  • Linux《进程概念(中)》
  • 在Arduino U8g2库中显示中文的方法