掘金 人工智能 23小时前
文末有奖|高德MCP 2.0 出行领域首发打通大模型与高德地图APP互联
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

高德地图发布MCP2.0,旨在解决用户在大模型生成攻略后,需要多次复制粘贴才能导航的问题。通过MCP Server与高德地图APP的无缝打通,用户可以将攻略中的点位、描述、行程规划等信息自动导入APP,生成专属地图,实现一键导航、打车、订票等功能。MCP2.0还提供专属地图Tools和唤端Tools,方便开发者在出行计划中载入动态地图,并嵌入与高德地图APP联动按钮。让用户出行更加便捷,生活更加丰富。

🗺️专属地图Tools:高德MCP2.0充分理解用户出行场景诉求,制定个性化出行计划,并在高德地图APP中生成专属地图,满足用户打车、导航、酒店预订、门票预订、餐厅预订、加油充电等一系列出行服务需求,提供一站式解决方案。

🔗唤端Tools & 动态地图:开发者现在可以使用高德MCP,直接在出行计划中载入动态地图,并嵌入与高德地图APP联动按钮,从而实现一键导航、打车等便捷功能,极大地提升了用户体验。

📍应用场景升级:从MCP1.0的寻找约会中间点和制作旅游攻略,升级到2.0版本的一键导入APP,生成专属地图,结合实时路况进行路线规划,使得出行更加高效便捷,应用场景更加丰富。

在数字化时代,地图服务不仅仅是定位目的地的工具,更是连接世界、探索未知的桥梁。无论是在繁忙工作中的差旅助手、旅行途中的导航伴侣,还是三两好友假日小聚时的工具指南,地图应用始终融入我们的生活方方面面,提供无可替代的便利与支持。

#高德MCP 文末有奖互动,我们期待各位开发者在各应用场景的奇思妙想和无限创意,快来赢取高德打车券和小米无线键盘吧!

2025年3月,高德地图发布了MCP1.0,为AI“装上了翅膀”,实现了从大模型的信息孤岛到实现万物互联的跃迁。提供了基于位置服务、地点信息搜索、路径规划、天气查询等12大核心地图服务,让用户在出行规划、位置信息检索场景下轻松获取即时信息。同时通过支持SSE协议、与阿里云百炼等大模型开发平台深入合作,极大降低开发者接入成本。上线仅1个月时间,已为数万开发者提供数百万次MCP服务,解决了开发者们在如旅行规划、 约会选点、出差选酒店等多领域的难题。

同时高德也发现在高德MCP1.0的加持下,通过大模型生成了一份优质的出行指南,但当用户想要根据指南实际出行导航前往任一地点时至少需要「复制-切换-粘贴-搜索-启动导航-返回攻略」6个步骤才能完成1次导航。完成整个攻略的使用,要经历几十次甚至上百次的机械化复制粘贴和不断切换APP的操作。

随着高德地图 MCP 2.0的发布,这套繁琐的体验将彻底成为“过去式”。通过高德MCP Server 与高德地图APP无缝打通,用户可将大模型产出的攻略与高德地图APP无缝衔接。

实现一键生成专属地图,将攻略中的点位、描述、行程规划等个性化信息自动导入到高德地图APP,生成一张独属于用户的私有地图,实际出行中可实现由攻略到一键导航、打车、 订票的丝滑体验。

高德MCP Server产品演进

1、专属地图 Tools:充分理解用户出行场景诉求,制定出行计划,并在高德地图APP生成专属地图,满足用户打车、导航、酒店预订、门票预订、餐厅预订、加油充电等一系列出行服务需求。

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

应用场景举例

案例1:寻找约会中间点

使用MCP1.0可以找到你和朋友之间双方出行都最方便的约会地点,那么2.0可以把约会地点导入高德地图APP,分享给好友,还能看到双方的实时位置。

案例2:制作旅游攻略

使用MCP1.0可以做一份详尽的旅游攻略,那么2.0可以在Web端生成可视化地图的同时,调用高德地图APP一键生成专属地图,将每日行程计划一键生成结合实时路况的路线。

不仅限于旅游场景,高德MCP2.0在出行和生活场景中还有更多丰富应用等您来探索!我们期待您的奇思妙想和无限创意!快来参与文末有奖互动,赢取高德打车券和小米无线键盘~

应用案例

案例介绍

五一计划到昆明游玩,如何使用AI+高德MCP2.0制作4天旅行攻略。

同时将生成的旅行攻略导入高德地图APP生成专属地图,以满足行中探店、导航、打车、购票等出行需求。

环境准备

安装 Cursor

1.本地下载安装 Cursor 客户端

2.Cursor 下载安装地址 :www.cursor.com/cn

3.登陆 Cursor 个人账户

建议使用最新版本的 Cursor 客户端。

申请高德开放平台

WEB 服务API 用户 key,申请地址 :console.amap.com/dev/key/app

Cursor 配置AMap MCP SSE 连接方式

1.添加一个新的 MCP Server 配置如下 :(供测试连接)

{    "mcpServers": {        "amap-amap-sse": {            "url":"https://mcp.amap.com/sse?key=<YOUR_API_KEY>"        }    }}

测试服务连接状态:

大模型需求描述:

场景案例一

大模型需求描述:

##我五一计划去昆明游玩4天的旅行攻略。

#帮制作旅行攻略,考虑出行时间和路线,以及天气状况路线规划。

#制作网页地图自定义绘制旅游路线和位置。

##网页使用简约美观页面风格,景区图片以卡片展示。

#行程规划结果在高德地图app展示,并集成到h5页面中。

##同一天行程景区之间我想打车前往。

#生成文件名 kmTravel.html。

Cursor 模型交互过程

第一次模型交互

第二次模型交互

第三次模型交互

效果页面地址预览:

a.amap.com/jsapi_demo_…

大模型生成的html 页面源码

<!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: #f5f7fa;            color: #333;            line-height: 1.6;        }        .container {            max-width: 1200px;            margin: 0 auto;            padding: 20px;        }        header {            text-align: center;            margin-bottom: 30px;            padding: 20px 0;            background: linear-gradient(135deg, #1e9cff, #3665ff);            color: white;            border-radius: 10px;            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);        }        header h1 {            font-size: 2.5rem;            margin-bottom: 10px;        }        header p {            font-size: 1.2rem;            opacity: 0.9;        }        .weather-section {            background-color: white;            padding: 20px;            border-radius: 10px;            margin-bottom: 30px;            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);        }        .weather-title {            font-size: 1.5rem;            margin-bottom: 15px;            color: #3665ff;            border-bottom: 2px solid #f0f0f0;            padding-bottom: 10px;        }        .weather-cards {            display: flex;            justify-content: space-between;            flex-wrap: wrap;            gap: 15px;        }        .weather-card {            flex: 1;            min-width: 200px;            background: linear-gradient(to bottom, #f9f9f9, #f0f0f0);            padding: 15px;            border-radius: 8px;            text-align: center;            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);        }        .weather-card h3 {            margin-bottom: 10px;            color: #3665ff;        }        .weather-icon {            font-size: 2rem;            margin: 10px 0;        }        .temp {            font-size: 1.2rem;            font-weight: bold;        }        .itinerary-section {            margin-bottom: 30px;        }        .day-container {            background-color: white;            border-radius: 10px;            margin-bottom: 30px;            overflow: hidden;            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);        }        .day-header {            background: linear-gradient(135deg, #36b5ff, #3665ff);            color: white;            padding: 15px 20px;            font-size: 1.3rem;        }        .day-content {            padding: 20px;        }        .spot-cards {            display: flex;            flex-wrap: wrap;            gap: 20px;            margin-top: 15px;        }        .spot-card {            flex: 1;            min-width: 250px;            max-width: 350px;            background-color: #f9f9f9;            border-radius: 8px;            overflow: hidden;            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);            transition: transform 0.3s;        }        .spot-card:hover {            transform: translateY(-5px);        }        .spot-img {            width: 100%;            height: 180px;            object-fit: cover;        }        .spot-info {            padding: 15px;        }        .spot-name {            font-size: 1.2rem;            font-weight: bold;            margin-bottom: 8px;            color: #3665ff;        }        .spot-desc {            font-size: 0.95rem;            color: #666;            margin-bottom: 10px;        }        .transportation {            display: flex;            align-items: center;            margin: 20px 0;            padding: 15px;            background-color: #f5f7fa;            border-radius: 8px;        }        .transportation-icon {            font-size: 1.5rem;            margin-right: 15px;            color: #3665ff;        }        .map-section {            background-color: white;            padding: 20px;            border-radius: 10px;            margin-bottom: 30px;            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);        }        .map-title {            font-size: 1.5rem;            margin-bottom: 15px;            color: #3665ff;            border-bottom: 2px solid #f0f0f0;            padding-bottom: 10px;        }        .map-container {            height: 500px;            border-radius: 8px;            overflow: hidden;            position: relative;        }        .map-legend {            position: absolute;            bottom: 20px;            left: 20px;            padding: 10px;            background: rgba(255,255,255,0.9);            border-radius: 5px;            box-shadow: 0 2px 6px rgba(0,0,0,0.3);            z-index: 100;            font-size: 12px;            max-width: 200px;        }        .taxi-links {            margin-top: 15px;        }        .taxi-btn {            display: inline-block;            background: linear-gradient(135deg, #ff9900, #ff6600);            color: white;            padding: 10px 15px;            border-radius: 5px;            text-decoration: none;            font-weight: bold;            margin-right: 10px;            margin-bottom: 10px;            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);        }        footer {            text-align: center;            padding: 20px;            color: #666;            font-size: 0.9rem;        }        .tips-section {            background-color: white;            padding: 20px;            border-radius: 10px;            margin-bottom: 30px;            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);        }        .tips-title {            font-size: 1.5rem;            margin-bottom: 15px;            color: #3665ff;            border-bottom: 2px solid #f0f0f0;            padding-bottom: 10px;        }        .tips-content ul {            padding-left: 20px;        }        .tips-content li {            margin-bottom: 10px;        }        .amap-marker-label {            border: 0;            background-color: transparent;        }        .amap-info-content {            padding: 0 !important;            border-radius: 6px !important;            box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;            border: none !important;        }        @media (max-width: 768px) {            .weather-cards, .spot-cards {                flex-direction: column;            }            .spot-card {                max-width: 100%;            }            .map-legend {                bottom: 10px;                left: 10px;                padding: 8px;                font-size: 10px;                max-width: 150px;            }        }    </style></head><body>    <div class="container">        <header>            <h1>昆明五一4天旅游攻略</h1>            <p>感受春城的魅力,探索自然与文化的完美融合</p>        </header>        <section class="weather-section">            <h2 class="weather-title">五一期间昆明天气预报</h2>            <div class="weather-cards">                <div class="weather-card">                    <h3>5月1日</h3>                    <div class="weather-icon">☀️</div>                    <p>白天: 晴</p>                    <p>夜间: 晴</p>                    <p class="temp">温度: 28°C/16°C</p>                    <p>风力: 西风 1-3级</p>                </div>                <div class="weather-card">                    <h3>5月2日</h3>                    <div class="weather-icon">☀️</div>                    <p>白天: 晴</p>                    <p>夜间: 多云</p>                    <p class="temp">温度: 29°C/13°C</p>                    <p>风力: 北风 1-3级</p>                </div>                <div class="weather-card">                    <h3>5月3日</h3>                    <div class="weather-icon">🌧️</div>                    <p>白天: 小雨</p>                    <p>夜间: 小雨</p>                    <p class="temp">温度: 22°C/14°C</p>                    <p>风力: 北风 1-3级</p>                </div>                <div class="weather-card">                    <h3>5月4日</h3>                    <div class="weather-icon">🌤️</div>                    <p>白天: 多云</p>                    <p>夜间: 多云</p>                    <p class="temp">温度: 24°C/15°C</p>                    <p>风力: 北风 1-3级</p>                </div>            </div>        </section>        <section class="tips-section">            <h2 class="tips-title">旅行小贴士</h2>            <div class="tips-content">                <ul>                    <li><strong>最佳旅游季节:</strong>昆明四季如春,全年均适合旅游,但3月-6月和9月-11月气候最宜人。</li>                    <li><strong>防晒准备:</strong>昆明海拔较高,紫外线强烈,请做好防晒措施。</li>                    <li><strong>高原反应:</strong>昆明海拔约1900米,部分人可能有轻微高原反应,请适当休息。</li>                    <li><strong>当地特色:</strong>过桥米线、汽锅鸡、宣威火腿、野生菌等是当地特色美食。</li>                    <li><strong>交通方式:</strong>市内可乘坐公交、地铁或打车,前往郊区景点可选择包车或参加一日游。</li>                    <li><strong>手机应用:</strong>建议下载高德地图,可方便查看路线和打车。本攻略中提供的链接点击后可直接在高德地图中打开。</li>                </ul>            </div>        </section>        <section class="map-section">            <h2 class="map-title">旅游路线地图</h2>            <div class="map-container" id="container"></div>            <div style="margin-top: 20px; text-align: center;">                <a href="amapuri://workInAmap/createWithToken?polymericId=mcp_1629b01b49ff4c14bddec3a54e5881c1&from=MCP" class="taxi-btn" style="font-size: 1.2rem; padding: 15px 25px;">                    <span style="margin-right: 10px;">📍</span>在高德地图App中查看完整行程                </a>            </div>        </section>        <section class="itinerary-section">            <div class="day-container">                <div class="day-header">                    <h2>Day 1: 昆明市区游 (5月1日)</h2>                </div>                <div class="day-content">                    <p>第一天以昆明市区游为主,感受春城的独特魅力。</p>                                        <div class="spot-cards">                        <div class="spot-card">                            <img src="https://store.is.autonavi.com/showpic/f3ab0d1d1db211982bcbc47cbe987ef2" alt="云南省博物馆" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">云南省博物馆</h3>                                <p class="spot-desc">云南省规模最大的综合性博物馆,包含丰富的云南历史文化和民族文物。</p>                                <p>建议游览时间:2小时</p>                            </div>                        </div>                                                <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/0325e7d95977ba015a886ac96e24b188" alt="云南民族村" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">云南民族村</h3>                                <p class="spot-desc">呈现云南26个民族的建筑、服饰和民俗风情,是了解云南民族文化的窗口。</p>                                <p>建议游览时间:3小时</p>                            </div>                        </div>                                                <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/6598448af0604a9b337201c78a73054c" alt="滇池" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">滇池海埂公园</h3>                                <p class="spot-desc">昆明最著名的湖泊,可欣赏美丽的湖光山色,还有著名的红嘴鸥。</p>                                <p>建议游览时间:2小时</p>                            </div>                        </div>                    </div>                    <div class="transportation">                        <div class="transportation-icon">🚕</div>                        <div>                            <h3>景点间交通</h3>                            <p>景点之间可打车前往,单程约15-20分钟。</p>                            <div class="taxi-links">                                <a href="iosamap://path?sourceApplication=applicationName&sid=&slat=&slon=&sname=&did=&dlat=25.037304&dlon=102.721511&dname=云南省博物馆&dev=0&t=0" class="taxi-btn">打车去云南省博物馆</a>                                <a href="iosamap://path?sourceApplication=applicationName&sid=&slat=&slon=&sname=&did=&dlat=24.966060&dlon=102.660893&dname=云南民族村&dev=0&t=0" class="taxi-btn">打车去云南民族村</a>                                <a href="iosamap://path?sourceApplication=applicationName&sid=&slat=&slon=&sname=&did=&dlat=24.961819&dlon=102.665688&dname=滇池海埂公园&dev=0&t=0" class="taxi-btn">打车去滇池海埂公园</a>                            </div>                        </div>                    </div>                </div>            </div>            <div class="day-container">                <div class="day-header">                    <h2>Day 2: 石林一日游 (5月2日)</h2>                </div>                <div class="day-content">                    <p>第二天前往世界自然遗产——石林,感受大自然的鬼斧神工。</p>                                        <div class="spot-cards">                        <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/5a69524e1f7a9e753cfc4374468c9b63" alt="石林风景区" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">石林风景区</h3>                                <p class="spot-desc">世界自然遗产,拥有奇特的喀斯特地貌,石峰林立,景色壮观。</p>                                <p>建议游览时间:4-5小时</p>                            </div>                        </div>                                                <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/849b09ca27389cb32bf1af4d0b4ab2eb" alt="石林胜境" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">石林胜境</h3>                                <p class="spot-desc">石林风景区内的精华景点,石柱形态各异,极为壮观。</p>                                <p>建议游览时间:1-2小时</p>                            </div>                        </div>                                                <div class="spot-card">                            <img src="https://aos-comment.amap.com/B03670XRRH/comment/44a0e4696200b1cdc13d5da63550f0dc_2048_2048_80.jpg" alt="小石林景区" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">小石林景区</h3>                                <p class="spot-desc">石林景区内的另一景点,较为安静,景色别具一格。</p>                                <p>建议游览时间:1-2小时</p>                            </div>                        </div>                    </div>                    <div class="transportation">                        <div class="transportation-icon">🚕</div>                        <div>                            <h3>前往石林</h3>                            <p>昆明市区到石林约86公里,驾车需要约1.5小时。推荐包车或参加一日游。</p>                            <div class="taxi-links">                                <a href="iosamap://path?sourceApplication=applicationName&sid=&slat=25.037304&slon=102.721511&sname=昆明市区&did=&dlat=24.812964&dlon=103.325701&dname=石林风景区&dev=0&t=0" class="taxi-btn">从昆明市区打车去石林</a>                                <a href="amapuri://drive/takeTaxi?sourceApplication=amapplatform&slat=25.037304&slon=102.721511&sname=昆明市区&dlon=103.325701&dlat=24.812964&dname=石林风景区" class="taxi-btn">高德打车去石林</a>                            </div>                        </div>                    </div>                </div>            </div>            <div class="day-container">                <div class="day-header">                    <h2>Day 3: 九乡风景区 (5月3日)</h2>                </div>                <div class="day-content">                    <p>第三天前往九乡风景区,探索神秘的溶洞世界。</p>                                        <div class="spot-cards">                        <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/8001b658c8114aa973f9507552813d93" alt="九乡风景区" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">九乡风景区</h3>                                <p class="spot-desc">中国最大的溶洞群,融洞、河、湖、瀑、峡等景观为一体,被誉为"溶洞博物馆"。</p>                                <p>建议游览时间:4-5小时</p>                            </div>                        </div>                                                <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/eb5790e34b9afd4fd9ff109d162a889e" alt="荫翠峡" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">荫翠峡</h3>                                <p class="spot-desc">九乡风景区内的精华景点,峡谷内溪水潺潺,植被茂密。</p>                                <p>建议游览时间:1小时</p>                            </div>                        </div>                                                <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/2c59dfe33183beb9724981ce02bb4259" alt="叠虹桥" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">叠虹桥景区</h3>                                <p class="spot-desc">九乡风景区内的溶洞景区,以自然天成的石桥闻名。</p>                                <p>建议游览时间:1小时</p>                            </div>                        </div>                    </div>                    <div class="transportation">                        <div class="transportation-icon">🚕</div>                        <div>                            <h3>前往九乡</h3>                            <p>昆明市区到九乡约96公里,驾车需要约1.5小时。推荐包车或参加一日游。</p>                            <div class="taxi-links">                                <a href="iosamap://path?sourceApplication=applicationName&sid=&slat=25.037304&slon=102.721511&sname=昆明市区&did=&dlat=25.081027&dlon=103.379754&dname=九乡风景区&dev=0&t=0" class="taxi-btn">从昆明市区打车去九乡</a>                                <a href="amapuri://drive/takeTaxi?sourceApplication=amapplatform&slat=25.037304&slon=102.721511&sname=昆明市区&dlon=103.379754&dlat=25.081027&dname=九乡风景区" class="taxi-btn">高德打车去九乡</a>                            </div>                        </div>                    </div>                </div>            </div>            <div class="day-container">                <div class="day-header">                    <h2>Day 4: 西山与官渡古镇 (5月4日)</h2>                </div>                <div class="day-content">                    <p>最后一天游览西山,欣赏昆明全景。</p>                                        <div class="spot-cards">                        <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/ffe50e18ecc3314225c876b0717ef923" alt="西山风景区" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">西山风景区</h3>                                <p class="spot-desc">可俯瞰整个昆明市和滇池,素有"睡美人"之称。</p>                                <p>建议游览时间:3-4小时</p>                            </div>                        </div>                                                <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/da543b4686486b2e6cdfa34033327c4c" alt="龙门" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">龙门</h3>                                <p class="spot-desc">西山风景区的精华景点,可俯瞰滇池全景。</p>                                <p>建议游览时间:1小时</p>                            </div>                        </div>                                                <div class="spot-card">                            <img src="http://store.is.autonavi.com/showpic/9badea547d784f320b6944744a55988a" alt="官渡古镇" class="spot-img">                            <div class="spot-info">                                <h3 class="spot-name">官渡古镇</h3>                                <p class="spot-desc">昆明历史最悠久的古镇之一,有着浓郁的历史文化氛围。</p>                                <p>建议游览时间:2小时</p>                            </div>                        </div>                    </div>                    <div class="transportation">                        <div class="transportation-icon">🚕</div>                        <div>                            <h3>景点间交通</h3>                            <p>西山距离市区约22公里,驾车需要约40分钟。官渡古镇位于市区东南方向。</p>                            <div class="taxi-links">                                <a href="iosamap://path?sourceApplication=applicationName&sid=&slat=25.037304&slon=102.721511&sname=昆明市区&did=&dlat=24.964622&dlon=102.628595&dname=西山风景区&dev=0&t=0" class="taxi-btn">从市区打车去西山</a>                                <a href="iosamap://path?sourceApplication=applicationName&sid=&slat=24.964622&slon=102.628595&sname=西山风景区&did=&dlat=24.961819&dlon=102.665688&dname=官渡古镇&dev=0&t=0" class="taxi-btn">从西山打车去官渡古镇</a>                            </div>                        </div>                    </div>                </div>            </div>        </section>        <footer>            <p>© 2025 昆明五一旅游攻略 | 制作时间: 2025年4月</p>        </footer>    </div>    <script>        window.onload = function() {            // 加载高德地图API            var url = 'https://webapi.amap.com/maps?v=2.0&key=98a9b1aede875554fc1957f1026b327a';            var jsapi = document.createElement('script');            jsapi.charset = 'utf-8';            jsapi.src = url;            document.head.appendChild(jsapi);            jsapi.onload = function() {                initMap();            };        }        function initMap() {            // 创建地图实例            var map = new AMap.Map('container', {                zoom: 9,                center: [102.832, 24.88], // 昆明中心位置                viewMode: '3D',                pitch: 30            });            // 创建Marker集合            var dayColors = ['#3366FF', '#FF6633', '#33CC66', '#9966FF'];                        // 第一天标记            var day1Markers = [                {position: [102.721511, 25.037304], title: '云南省博物馆', content: '<div>Day 1: 云南省博物馆</div>'},                {position: [102.660893, 24.966060], title: '云南民族村', content: '<div>Day 1: 云南民族村</div>'},                {position: [102.665688, 24.961819], title: '滇池海埂公园', content: '<div>Day 1: 滇池海埂公园</div>'}            ];            // 第二天标记            var day2Markers = [                {position: [102.721511, 25.037304], title: '昆明市区', content: '<div>Day 2: 昆明市区(出发点)</div>'},                {position: [103.325701, 24.812964], title: '石林风景区', content: '<div>Day 2: 石林风景区</div>'}            ];            // 第三天标记            var day3Markers = [                {position: [102.721511, 25.037304], title: '昆明市区', content: '<div>Day 3: 昆明市区(出发点)</div>'},                {position: [103.379754, 25.081027], title: '九乡风景区', content: '<div>Day 3: 九乡风景区</div>'}            ];            // 第四天标记            var day4Markers = [                {position: [102.721511, 25.037304], title: '昆明市区', content: '<div>Day 4: 昆明市区(出发点)</div>'},                {position: [102.628595, 24.964622], title: '西山风景区', content: '<div>Day 4: 西山风景区</div>'},                {position: [102.665688, 24.961819], title: '官渡古镇', content: '<div>Day 4: 官渡古镇</div>'}            ];            // 添加标记并绘制路线            addMarkersAndPath(map, day1Markers, dayColors[0], 'Day 1: 昆明市区游');            addMarkersAndPath(map, day2Markers, dayColors[1], 'Day 2: 石林一日游');            addMarkersAndPath(map, day3Markers, dayColors[2], 'Day 3: 九乡风景区');            addMarkersAndPath(map, day4Markers, dayColors[3], 'Day 4: 西山与官渡古镇');            // 添加图例            addLegend(map, dayColors);        }        function addMarkersAndPath(map, markerData, color, dayTitle) {            var markers = [];            var path = [];            // 创建标记            markerData.forEach(function(item, index) {                var marker = new AMap.Marker({                    position: item.position,                    title: item.title,                    map: map,                    icon: new AMap.Icon({                        size: new AMap.Size(24, 24),                        image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-' + (index + 1) + '.png',                        imageSize: new AMap.Size(24, 24)                    })                });                // 信息窗体                var infoWindow = new AMap.InfoWindow({                    content: '<div style="padding:10px;font-size:14px;color:' + color + '">' +                             '<b>' + dayTitle + '</b><br/>' +                            item.title + '</div>',                    offset: new AMap.Pixel(0, -30),                    autoMove: true,                    closeWhenClickMap: true                });                marker.on('click', function() {                    infoWindow.open(map, marker.getPosition());                });                markers.push(marker);                path.push(item.position);            });            // 创建路线            if (path.length > 1) {                var polyline = new AMap.Polyline({                    path: path,                    isOutline: true,                    outlineColor: '#ffffff',                    borderWeight: 2,                    strokeColor: color,                    strokeWeight: 5,                    strokeStyle: 'solid',                    strokeOpacity: 0.9,                    zIndex: 50,                    map: map                });            }        }        function addLegend(map, colors) {            // 创建图例控件            var legend = document.createElement('div');            legend.className = 'map-legend';            legend.style.cssText = '';                        var html = '<div style="font-weight:bold;margin-bottom:5px;">行程路线</div>';                        var days = ['Day 1: 昆明市区游', 'Day 2: 石林一日游', 'Day 3: 九乡风景区', 'Day 4: 西山与官渡古镇'];                        days.forEach(function(day, i) {                html += '<div style="margin:3px 0;"><span style="display:inline-block;width:20px;height:3px;background:' +                        colors[i] + ';margin-right:5px;vertical-align:middle;"></span>' + day + '</div>';            });                        legend.innerHTML = html;            document.getElementById('container').appendChild(legend);        }    </script></body></html> 

实现效果体验:

旅行规划页:

a.amap.com/jsapi_demo_…

专属旅行地图:

surl.amap.com/ECgqe25RaRc

说明:完整实现上述流程需下载高德地图APP最新版本,并扫描公测码,抢先体验。

操作步骤说明:

1、更新高德地图APP公测版:高德App->首页->扫一扫(搜索后的扫一扫工具)->点击复制->重新启动APP(需后台关闭后重启)。
2、使用Cursor调用高德MCP Server - mcp_schema_personal_map工具,获取并打开专属地图链接。

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

高德地图 MCP2.0 出行服务 专属地图 AI应用
相关文章