在数字化时代，地图服务不仅仅是定位目的地的工具，更是连接世界、探索未知的桥梁。无论是在繁忙工作中的差旅助手、旅行途中的导航伴侣，还是三两好友假日小聚时的工具指南，地图应用始终融入我们的生活方方面面，提供无可替代的便利与支持。
#高德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 配置如下 ：（供测试连接）
js
{
"mcpServers": {
"amap-amap-sse": {
"url":"https://mcp.amap.com/sse?key=<YOUR_API_KEY>"
}
}
}测试服务连接状态：
大模型需求描述：
场景案例一
大模型需求描述：
##我五一计划去昆明游玩4天的旅行攻略。
#帮制作旅行攻略，考虑出行时间和路线，以及天气状况路线规划。
#制作网页地图自定义绘制旅游路线和位置。
##网页使用简约美观页面风格，景区图片以卡片展示。
#行程规划结果在高德地图app展示，并集成到h5页面中。
##同一天行程景区之间我想打车前往。
#生成文件名 kmTravel.html。
Cursor 模型交互过程
第一次模型交互
第二次模型交互
第三次模型交互
效果页面地址预览：
大模型生成的html 页面源码
js
<!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工具，获取并打开专属地图链接。
