在数字化时代,地图服务不仅仅是定位目的地的工具,更是连接世界、探索未知的桥梁。无论是在繁忙工作中的差旅助手、旅行途中的导航伴侣,还是三两好友假日小聚时的工具指南,地图应用始终融入我们的生活方方面面,提供无可替代的便利与支持。
#高德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 模型交互过程
第一次模型交互
第二次模型交互
第三次模型交互
效果页面地址预览:
大模型生成的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>
实现效果体验:
旅行规划页:
专属旅行地图:
说明:完整实现上述流程需下载高德地图APP最新版本,并扫描公测码,抢先体验。
操作步骤说明:
1、更新高德地图APP公测版:高德App->首页->扫一扫(搜索后的扫一扫工具)->点击复制->重新启动APP(需后台关闭后重启)。
2、使用Cursor调用高德MCP Server - mcp_schema_personal_map工具,获取并打开专属地图链接。