被问爆的旅游网页！cursor + 腾讯云 Edge MCP + 高德地图MCP2.0，圆你一个沉浸式旅行梦

Undoom

已于 2025-05-11 22:10:12 修改

阅读量3.6w

点赞数 248

分类专栏：测评文章标签：旅游腾讯云 edge 高德地图MCP2.0

于 2025-05-09 23:03:12 首次发布

本文链接：https://blog.csdn.net/2301_80863610/article/details/147839173

版权

测评专栏收录该内容

29 篇文章

订阅专栏

作为一个想打造旅游网页的 “技术小白”，我曾无数次被复杂的代码折磨到崩溃，在寻找稳定服务器资源时焦头烂额，更因地图数据接入的繁琐流程屡屡碰壁。想要呈现出集导航、景点推荐、行程规划于一体的旅游网页，仅凭一己之力，几乎是不可能完成的任务。直到遇见 cursor、腾讯云 Edge MCP 和高德地图 MCP2.0，我的困境才迎来转机 —— 它们就像为我量身定制的 “救星”，以各自的强大功能，填补了我技术与资源上的所有缺口，让梦想中的旅游网页从空想变为现实。

关于Edge MCP的介绍

腾讯云 EdgeOne Pages MCP 是基于边缘计算和大语言模型的新型开发工具
用户在代码编辑器中通过自然语言指令，就能让 AI 生成完整的 HTML 网页内容，并自动调用 EdgeOne 边缘计算 API，将网站快速部署到 CDN 节点，生成可公开访问的链接。例如，只需在编辑器里用 “人话” 跟大模型说 “帮我生成一个特定主题的页面并帮我直接部署”，无需手动编写代码或配置服务器，即可快速完成网页的生成与部署，对编程新手和经验丰富的开发者都非常友好。
此 MCP 服务集成了 EdgeOne Pages Functions 以部署静态 HTML 内容。实现方式使用：
EdgeOne Pages Functions - 一种无服务器计算平台，允许在边缘执行 JavaScript/TypeScript 代码。
关键实现细节：
使用 EdgeOne Pages KV 存储并提供 HTML 内容
为每次部署自动生成一个公共 URL
使用适当的错误消息处理 API 错误
工作原理：
MCP 服务器通过 deploy-html 工具接受 HTML 内容
它连接到 EdgeOne Pages API 以获取基础 URL
使用 EdgeOne Pages KV API 部署 HTML 内容
返回一个可公开访问的已部署内容的 URL
使用示例：
向 MCP 服务提供 HTML 内容
接收一个可立即访问的公共 URL

关于高德地图2.0MCP的介绍

高德地图 MCP 2.0 是高德地图开放平台于 2025 年 4 月 30 日正式发布的全新版本，它实现了 AI 攻略与地图应用的深度融合，全面升级了用户出行体验

一键生成专属地图：用户可一键将 AI 生成的攻略内容转化为专属地图，攻略中的点位、描述、行程规划等个性化信息将自动整合，形成用户私有地图，实现了从攻略查看到导航、打车、订票的流畅转换。
深度理解用户需求：能够深度理解用户的出行需求，制定出行计划，并自动生成高德地图 APP 内的专属地图，为用户提供更精准、贴心的服务，就像拥有一个 “真正懂你的出行秘书”。
动态地图与联动按钮：允许用户在出行计划中直接嵌入动态地图和与高德地图 APP 联动的功能按钮，用户在出行过程中无需再切换应用，便可随时查看最新的位置信息和导航指引，简化了操作步骤，实现 “行前 - 行中 - 行后” 全流程覆盖。
1、专属地图 Tools：充分理解用户出行场景诉求，制定出行计划，并在高德地图APP生成专属地图，满足用户打车、导航、酒店预订、门票预订、餐厅预订、加油充电等一系列出行服务需求。

2、唤端Tools & 动态地图：开发者可以使用高德MCP，直接在出行计划中载入动态地图，并嵌入与高德地图APP联动按钮，实现一键导航、打车等功能。

在cursor中配置好高德MCP和Edge Mcp

添加高德地图MCP

我们打开cursor进入到CurSor Setting

将下面的代码输入进去

{
  "mcpServers": {
    "amap-amap-sse": {
      "url": "https://mcp.amap.com/sse?key=您在高德官网上申请的key"
    }
  }
}

这里的我们需要去申请一个自己的API KEYS了
点击进入到高德平台
进行注册并且登录操作
在高德平台右上角进行应用的创建

创建好了系统之后我们进行添加Key的操作

这里的话我们就选择了Web服务了

然后点击提交就能看到我们的API Keys了

为了对 Key 的安全有效管理，请妥善保管你的 Key。

然后获取到了API之后，我们将这个API替换到原代码中的部分

配置好了之后并且链接成功了就是这个样子的

添加EdgeOne Mcp

在腾讯云开发者MCP广场找到我们的EdgeOne Pages

点击进去就会有详细的解释，关于EdgeOne Mcp的相关信息

我们将配置MCP的json代码复制

{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"]
    }
  }
}

和上面的方式一样，在trae中添加MCP，成功之后就是这个样子的

ai生成代码对话

我们对ai说：

我现在想去北京玩几天，第一题天想去天安门，第二天想去故宫，第三天想去颐和园，第四天想去长城，帮制作旅行攻略，考虑出行时间和路线，以及天气状况路线规划。制作网页地图自定义绘制旅游路线和位置。网页使用简约美观页面风格，景区图片以卡片展示。行程规划结果在高德地图app展示，并集成到h5页面中。同一天行程景区之间我想打车前往。生成的文件名字叫trive.html。我需要的在网页上展示的地图是想通过自定义添加，景点标记和一些路线图并不是之间嵌入PC地图，并且最后使用edge进行网页的部署操作

在我们的第一轮对话还是比较顺利的，他利用我们的高德MCP获取了北京的最近的几天天气信息

但是我们这里还不是很满意的，我需要将路线更加清晰，并且生成的程序可以在手机高德地图上打开

我们第二轮继续对话

我需要你在地图的左下角进行第几天第几天路程的安排，并且地图中的路线以不同的颜色进行安排。并且这个html我可以在手机的高德地图上进行打开，你帮我把代码重新修改下，并且使用edgeone进行网页的部署操作

但是生成出代码还是存在差错，地图无法显示，我还发现这个每个景点的下方介绍太少了，我们在第三轮对话这么说

我觉得这个太单调了，可以对这四天的每个景点做一个规划，更详细点，比如说附近有啥玩的有啥吃的，介绍的更加详细点。并且这个地图似乎没有显示出来了，你再根据要求优化下代码

这里我们再给AI添点料，我想在手机端访问链接生成我的个人地图，并且可以分享给我的家人

能否根据需求，生成可视化网页的同时，调用高德地图APP生成专属地图，邀请同行好友进入专属地图，共享攻略、位置，同时基于专属地图使用高德各种出行服务

下面我们看看效果

在手机上我们能通过点击相关的信息生成个人高德地图，并且可以进行路线分享、打车服务，根据专门的路线行程特定的方案

点击相关的链接可以生成个人地图，记录相关的地图信息以及快速进行打车的各种操作，更加方便了，不用像之前一样到处去搜索

链接访问地址：
https://mcp.edgeone.site/share/4WifHMi1-RZ3uU-R2MHrM

https://ci300vol7n.app.yourware.so/

代码示例

<!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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=xxxxxxxxxxxx"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
            padding: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .map-container {
            position: relative;
            height: 70vh;
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        #container {
            height: 100%;
            width: 100%;
        }
        .legend {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }
        .legend-color {
            width: 20px;
            height: 3px;
            margin-right: 8px;
        }
        .schedule-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .schedule-card:hover {
            transform: translateY(-5px);
        }
        .schedule-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 12px;
            margin-bottom: 15px;
        }
        .info-section {
            margin-top: 15px;
            padding: 15px;
            background-color: #fff;
            border-radius: 8px;
            border-left: 4px solid;
        }
        .info-section.attractions {
            border-left-color: #1890ff;
        }
        .info-section.food {
            border-left-color: #f5222d;
        }
        .info-section.tips {
            border-left-color: #52c41a;
        }
        .weather-info {
            background-color: #e9ecef;
            padding: 12px;
            border-radius: 8px;
            margin-top: 10px;
        }
        .route-info {
            margin-top: 15px;
            padding: 12px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        .open-amap-btn {
            display: block;
            width: 100%;
            padding: 12px;
            background: #1890ff;
            color: white;
            text-align: center;
            border-radius: 8px;
            text-decoration: none;
            margin-top: 15px;
            transition: background 0.3s;
        }
        .open-amap-btn:hover {
            background: #096dd9;
            color: white;
        }
        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #1890ff;
        }
        .food-item, .attraction-item {
            margin-bottom: 10px;
            padding-left: 20px;
            position: relative;
        }
        .food-item:before, .attraction-item:before {
            content: "•";
            position: absolute;
            left: 0;
            color: #1890ff;
        }
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            .map-container {
                height: 50vh;
            }
            .legend {
                bottom: 10px;
                left: 10px;
                font-size: 12px;
            }
        }
        .view-full-trip {
            margin: 20px 0;
        }
        .view-full-trip .btn {
            padding: 15px;
            font-size: 1.1rem;
            font-weight: 500;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(255, 107, 0, 0.2);
            transition: all 0.3s ease;
        }
        .view-full-trip .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(255, 107, 0, 0.3);
        }
        .transport-info {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .transport-info .btn {
            padding: 12px;
            font-weight: 500;
            background-color: #FF6B00;
            border: none;
            transition: all 0.3s ease;
        }
        .transport-info .btn:hover {
            background-color: #FF8534;
            transform: translateY(-2px);
        }
        @media (max-width: 768px) {
            .transport-info .row > div {
                margin-bottom: 10px;
            }
            .view-full-trip .btn {
                font-size: 1rem;
                padding: 12px;
            }
        }
        .custom-map-section {
            margin: 20px 0;
        }
        .custom-map-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .custom-map-features {
            margin-top: 20px;
        }
        .custom-map-btn {
            width: 100%;
            padding: 15px;
            font-size: 1.2rem;
            background-color: #FF6B00;
            border: none;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        .custom-map-btn:hover {
            background-color: #FF8534;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(255, 107, 0, 0.3);
        }
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        .feature-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        .feature-item:hover {
            background: #e9ecef;
            transform: translateY(-2px);
        }
        .feature-item i {
            font-size: 1.5rem;
            color: #FF6B00;
            margin-right: 10px;
        }
        .feature-item span {
            font-size: 1rem;
            color: #333;
            font-weight: 500;
        }
        @media (max-width: 768px) {
            .feature-grid {
                grid-template-columns: 1fr;
            }
            .custom-map-btn {
                font-size: 1rem;
                padding: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>北京4日游行程规划</h1>
            <p class="text-muted">精心规划的北京文化之旅</p>
        </div>

        <div class="map-container">
            <div id="container"></div>
            <div class="legend">
                <div class="legend-item">
                    <div class="legend-color" style="background: #FF4D4F"></div>
                    <span>第一天：天安门</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background: #1890FF"></div>
                    <span>第二天：故宫</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background: #52C41A"></div>
                    <span>第三天：颐和园</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background: #722ED1"></div>
                    <span>第四天：八达岭长城</span>
                </div>
            </div>
        </div>

        <!-- 添加专属地图功能区 -->
        <div class="custom-map-section mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="custom-map-card">
                        <h3 class="section-title">
                            <i class="fas fa-map-marked-alt"></i> 专属地图
                        </h3>
                        <div class="custom-map-features">
                            <a href="amapuri://workInAmap/createWithToken?polymericId=mcp_74e1c260269c470493d51c0c71570dce&from=MCP" class="btn btn-primary btn-lg btn-block custom-map-btn">
                                <i class="fas fa-map"></i> 打开专属地图
                            </a>
                            <div class="feature-grid">
                                <div class="feature-item">
                                    <i class="fas fa-users"></i>
                                    <span>邀请好友同游</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-location-arrow"></i>
                                    <span>实时位置共享</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-route"></i>
                                    <span>路线导航</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-car"></i>
                                    <span>打车服务</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加完整行程查看按钮 -->
        <div class="view-full-trip">
            <a href="androidamap://route/plan/?dlat=40.359876&dlon=116.024067&dname=八达岭长城&slat=39.90923&slon=116.397428&sname=天安门&way=0,1,2,3&dev=0&t=0" class="btn btn-primary btn-lg btn-block mb-4" style="background-color: #FF6B00; border: none;">
                <i class="fas fa-map-marked-alt"></i> 在高德地图App中查看完整行程
            </a>
        </div>

        <!-- 添加景点间交通信息 -->
        <div class="transport-info mb-4">
            <h3 class="section-title" style="color: #333;">
                <i class="fas fa-car"></i> 景点间交通
            </h3>
            <p class="text-muted mb-3">景点之间可打车前往，单程约15-20分钟。</p>
            <div class="row g-3">
                <div class="col-md-4">
                    <a href="androidamap://route/plan/?dlat=39.917544&dlon=116.403414&dname=故宫&slat=39.90923&slon=116.397428&sname=天安门&dev=0&t=0" class="btn btn-warning w-100">
                        打车去故宫博物院
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="androidamap://route/plan/?dlat=39.999493&dlon=116.275177&dname=颐和园&slat=39.917544&slon=116.403414&sname=故宫&dev=0&t=0" class="btn btn-warning w-100">
                        打车去颐和园
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="androidamap://route/plan/?dlat=40.359876&dlon=116.024067&dname=八达岭长城&slat=39.999493&slon=116.275177&sname=颐和园&dev=0&t=0" class="btn btn-warning w-100">
                        打车去八达岭长城
                    </a>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Day 1 -->
            <div class="col-md-6 col-lg-3">
                <div class="schedule-card">
                    <h3>第一天 - 天安门</h3>
                    <img src="http://store.is.autonavi.com/showpic/17a36a737908810a310387c7d53e878a" alt="天安门">
                    <div class="weather-info">
                        <i class="fas fa-sun"></i> 天气：晴
                        <br>
                        温度：23°C / 12°C
                    </div>
                    <div class="info-section attractions">
                        <div class="section-title"><i class="fas fa-landmark"></i> 景点介绍</div>
                        <p>天安门是中华人民共和国的象征，也是世界上最大的城市广场之一。这里不仅有着深厚的历史文化底蕴，更承载着无数重要的历史时刻。</p>
                        <div class="attraction-item">国旗护卫队升旗仪式（建议清晨观看）</div>
                        <div class="attraction-item">人民英雄纪念碑</div>
                        <div class="attraction-item">毛主席纪念堂</div>
                        <div class="attraction-item">天安门城楼</div>
                    </div>
                    <div class="info-section food">
                        <div class="section-title"><i class="fas fa-utensils"></i> 美食推荐</div>
                        <div class="food-item">全聚德烤鸭（前门店）</div>
                        <div class="food-item">东来顺涮羊肉</div>
                        <div class="food-item">护国寺小吃（特色小吃）</div>
                        <div class="food-item">都一处烧麦（老字号）</div>
                    </div>
                    <div class="info-section tips">
                        <div class="section-title"><i class="fas fa-lightbulb"></i> 游玩贴士</div>
                        <ul>
                            <li>早晨6点可以观看升旗仪式</li>
                            <li>参观毛主席纪念堂需要携带身份证</li>
                            <li>广场禁止携带大型背包</li>
                            <li>建议参观时间：2-3小时</li>
                        </ul>
                    </div>
                    <div class="route-info">
                        <p><strong>建议游览时间：</strong> 2-3小时</p>
                        <p><strong>交通方式：</strong> 地铁1号线天安门东站下</p>
                    </div>
                    <a href="androidamap://route/plan/?dlat=39.90923&dlon=116.397428&dname=天安门&dev=0&t=0" class="open-amap-btn">
                        <i class="fas fa-map-marker-alt"></i> 在高德地图中打开
                    </a>
                </div>
            </div>

            <!-- Day 2 -->
            <div class="col-md-6 col-lg-3">
                <div class="schedule-card">
                    <h3>第二天 - 故宫</h3>
                    <img src="http://store.is.autonavi.com/showpic/ae0a73885ccb64f09b73adef515c8c28" alt="故宫">
                    <div class="weather-info">
                        <i class="fas fa-sun"></i> 天气：晴
                        <br>
                        温度：25°C / 15°C
                    </div>
                    <div class="info-section attractions">
                        <div class="section-title"><i class="fas fa-landmark"></i> 景点介绍</div>
                        <p>故宫是中国最大的古代宫殿建筑群，也是世界上保存最完整、规模最大的木质宫殿建筑。</p>
                        <div class="attraction-item">太和殿（金銮殿）</div>
                        <div class="attraction-item">乾清宫</div>
                        <div class="attraction-item">御花园</div>
                        <div class="attraction-item">珍宝馆</div>
                    </div>
                    <div class="info-section food">
                        <div class="section-title"><i class="fas fa-utensils"></i> 美食推荐</div>
                        <div class="food-item">故宫角楼咖啡厅</div>
                        <div class="food-item">景山公园小吃街</div>
                        <div class="food-item">南池子大街美食</div>
                        <div class="food-item">文华酒店中餐厅</div>
                    </div>
                    <div class="info-section tips">
                        <div class="section-title"><i class="fas fa-lightbulb"></i> 游玩贴士</div>
                        <ul>
                            <li>提前在网上预约门票</li>
                            <li>建议从南到北参观</li>
                            <li>周一闭馆（除法定节假日）</li>
                            <li>建议参观时间：4-5小时</li>
                        </ul>
                    </div>
                    <div class="route-info">
                        <p><strong>建议游览时间：</strong> 4-5小时</p>
                        <p><strong>交通方式：</strong> 天安门广场步行可达</p>
                    </div>
                    <a href="androidamap://route/plan/?dlat=39.917544&dlon=116.403414&dname=故宫&dev=0&t=0" class="open-amap-btn">
                        <i class="fas fa-map-marker-alt"></i> 在高德地图中打开
                    </a>
                </div>
            </div>

            <!-- Day 3 -->
            <div class="col-md-6 col-lg-3">
                <div class="schedule-card">
                    <h3>第三天 - 颐和园</h3>
                    <img src="http://store.is.autonavi.com/showpic/415dba21b4b140c18dca5af366930b3a" alt="颐和园">
                    <div class="weather-info">
                        <i class="fas fa-cloud-sun"></i> 天气：多云
                        <br>
                        温度：27°C / 17°C
                    </div>
                    <div class="info-section attractions">
                        <div class="section-title"><i class="fas fa-landmark"></i> 景点介绍</div>
                        <p>颐和园是中国现存最大、保存最完整的皇家园林，被誉为"皇家园林博物馆"。</p>
                        <div class="attraction-item">佛香阁</div>
                        <div class="attraction-item">长廊</div>
                        <div class="attraction-item">昆明湖</div>
                        <div class="attraction-item">玉澜堂</div>
                    </div>
                    <div class="info-section food">
                        <div class="section-title"><i class="fas fa-utensils"></i> 美食推荐</div>
                        <div class="food-item">颐和园仿膳</div>
                        <div class="food-item">江南村（农家菜）</div>
                        <div class="food-item">北大西门小吃街</div>
                        <div class="food-item">苏州街美食</div>
                    </div>
                    <div class="info-section tips">
                        <div class="section-title"><i class="fas fa-lightbulb"></i> 游玩贴士</div>
                        <ul>
                            <li>建议购买联票</li>
                            <li>可以乘船游览昆明湖</li>
                            <li>建议早晨或傍晚游览</li>
                            <li>建议参观时间：4-5小时</li>
                        </ul>
                    </div>
                    <div class="route-info">
                        <p><strong>建议游览时间：</strong> 4-5小时</p>
                        <p><strong>交通方式：</strong> 地铁4号线颐和园站下</p>
                    </div>
                    <a href="androidamap://route/plan/?dlat=39.999493&dlon=116.275177&dname=颐和园&dev=0&t=0" class="open-amap-btn">
                        <i class="fas fa-map-marker-alt"></i> 在高德地图中打开
                    </a>
                </div>
            </div>

            <!-- Day 4 -->
            <div class="col-md-6 col-lg-3">
                <div class="schedule-card">
                    <h3>第四天 - 八达岭长城</h3>
                    <img src="http://store.is.autonavi.com/showpic/73e202337e15794120c2004ef9ced36d" alt="八达岭长城">
                    <div class="weather-info">
                        <i class="fas fa-sun"></i> 天气：晴
                        <br>
                        温度：27°C / 17°C
                    </div>
                    <div class="info-section attractions">
                        <div class="section-title"><i class="fas fa-landmark"></i> 景点介绍</div>
                        <p>八达岭长城是万里长城中最具代表性的一段，也是最早对外开放的长城景区。</p>
                        <div class="attraction-item">北八楼</div>
                        <div class="attraction-item">南七楼</div>
                        <div class="attraction-item">八达岭长城博物馆</div>
                        <div class="attraction-item">长城电影城</div>
                    </div>
                    <div class="info-section food">
                        <div class="section-title"><i class="fas fa-utensils"></i> 美食推荐</div>
                        <div class="food-item">军营锅盔</div>
                        <div class="food-item">农家院（农家菜）</div>
                        <div class="food-item">长城饭店</div>
                        <div class="food-item">关东煮（冬季）</div>
                    </div>
                    <div class="info-section tips">
                        <div class="section-title"><i class="fas fa-lightbulb"></i> 游玩贴士</div>
                        <ul>
                            <li>建议早晨出发避开人流</li>
                            <li>可以选择缆车上下</li>
                            <li>准备舒适的登山鞋</li>
                            <li>建议参观时间：4-5小时</li>
                        </ul>
                    </div>
                    <div class="route-info">
                        <p><strong>建议游览时间：</strong> 4-5小时</p>
                        <p><strong>交通方式：</strong> S2线八达岭长城站下</p>
                    </div>
                    <a href="androidamap://route/plan/?dlat=40.359876&dlon=116.024067&dname=八达岭长城&dev=0&t=0" class="open-amap-btn">
                        <i class="fas fa-map-marker-alt"></i> 在高德地图中打开
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 10,
            center: [116.397428, 39.90923],
            mapStyle: 'amap://styles/fresh'
        });

        // 景点坐标和路线颜色
        const routes = [
            {
                name: '天安门',
                position: [116.397428, 39.90923],
                day: 1,
                color: '#FF4D4F'
            },
            {
                name: '故宫',
                position: [116.403414, 39.917544],
                day: 2,
                color: '#1890FF'
            },
            {
                name: '颐和园',
                position: [116.275177, 39.999493],
                day: 3,
                color: '#52C41A'
            },
            {
                name: '八达岭长城',
                position: [116.024067, 40.359876],
                day: 4,
                color: '#722ED1'
            }
        ];

        // 添加标记和路线
        for (let i = 0; i < routes.length; i++) {
            const current = routes[i];
            const next = routes[i + 1];

            // 添加标记
            const marker = new AMap.Marker({
                position: current.position,
                title: current.name,
                label: {
                    content: `第${current.day}天`,
                    direction: 'top'
                }
            });

            const content = `
                <div class="info-window" style="padding: 15px;">
                    <h4 style="margin-bottom: 10px;">第${current.day}天 - ${current.name}</h4>
                    <p style="margin-bottom: 5px;">点击卡片查看详细行程</p>
                </div>
            `;

            const infoWindow = new AMap.InfoWindow({
                content: content,
                offset: new AMap.Pixel(0, -30)
            });

            marker.on('click', () => {
                infoWindow.open(map, current.position);
            });

            map.add(marker);

            // 如果有下一个点，绘制路线
            if (next) {
                const polyline = new AMap.Polyline({
                    path: [current.position, next.position],
                    strokeColor: current.color,
                    strokeWeight: 4,
                    strokeStyle: "solid",
                    lineJoin: 'round',
                    showDir: true
                });

                map.add(polyline);
            }
        }

        // 自适应显示所有点
        map.setFitView();
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>