作为一个想打造旅游网页的 “技术小白”，我曾无数次被复杂的代码折磨到崩溃，在寻找稳定服务器资源时焦头烂额，更因地图数据接入的繁琐流程屡屡碰壁。想要呈现出集导航、景点推荐、行程规划于一体的旅游网页，仅凭一己之力，几乎是不可能完成的任务。直到遇见 cursor、腾讯云 Edge MCP 和高德地图 MCP2.0，我的困境才迎来转机 —— 它们就像为我量身定制的 “救星”，以各自的强大功能，填补了我技术与资源上的所有缺口，让梦想中的旅游网页从空想变为现实。
关于Edge MCP的介绍
腾讯云 EdgeOne Pages MCP 是基于边缘计算和大语言模型的新型开发工具 用户在代码编辑器中通过自然语言指令，就能让 AI 生成完整的 HTML 网页内容，并自动调用 EdgeOne 边缘计算 API，将网站快速部署到 CDN 节点，生成可公开访问的链接。例如，只需在编辑器里用 “人话” 跟大模型说 “帮我生成一个特定主题的页面并帮我直接部署”，无需手动编写代码或配置服务器，即可快速完成网页的生成与部署，对编程新手和经验丰富的开发者都非常友好。
关于高德地图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
将下面的代码输入进去
这里的我们需要去申请一个自己的API KEYS了点击进入到 高德平台进行注册并且登录操作
在高德平台右上角进行应用的创建
创建好了系统之后我们进行添加Key的操作
这里的话我们就选择了Web服务了
然后点击提交就能看到我们的API Keys了
为了对 Key 的安全有效管理，请妥善保管你的 Key。
然后获取到了API之后，我们将这个API替换到原代码中的部分
配置好了之后并且链接成功了就是这个样子的
添加EdgeOne Mcp
在 腾讯云开发者MCP广场找到我们的EdgeOne Pages
点击进去就会有详细的解释，关于EdgeOne Mcp的相关信息
我们将配置MCP的json代码复制
和上面的方式一样，在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=f13b81f742070b4cb2554f340f747502"></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>- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203.
- 204.
- 205.
- 206.
- 207.
- 208.
- 209.
- 210.
- 211.
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 218.
- 219.
- 220.
- 221.
- 222.
- 223.
- 224.
- 225.
- 226.
- 227.
- 228.
- 229.
- 230.
- 231.
- 232.
- 233.
- 234.
- 235.
- 236.
- 237.
- 238.
- 239.
- 240.
- 241.
- 242.
- 243.
- 244.
- 245.
- 246.
- 247.
- 248.
- 249.
- 250.
- 251.
- 252.
- 253.
- 254.
- 255.
- 256.
- 257.
- 258.
- 259.
- 260.
- 261.
- 262.
- 263.
- 264.
- 265.
- 266.
- 267.
- 268.
- 269.
- 270.
- 271.
- 272.
- 273.
- 274.
- 275.
- 276.
- 277.
- 278.
- 279.
- 280.
- 281.
- 282.
- 283.
- 284.
- 285.
- 286.
- 287.
- 288.
- 289.
- 290.
- 291.
- 292.
- 293.
- 294.
- 295.
- 296.
- 297.
- 298.
- 299.
- 300.
- 301.
- 302.
- 303.
- 304.
- 305.
- 306.
- 307.
- 308.
- 309.
- 310.
- 311.
- 312.
- 313.
- 314.
- 315.
- 316.
- 317.
- 318.
- 319.
- 320.
- 321.
- 322.
- 323.
- 324.
- 325.
- 326.
- 327.
- 328.
- 329.
- 330.
- 331.
- 332.
- 333.
- 334.
- 335.
- 336.
- 337.
- 338.
- 339.
- 340.
- 341.
- 342.
- 343.
- 344.
- 345.
- 346.
- 347.
- 348.
- 349.
- 350.
- 351.
- 352.
- 353.
- 354.
- 355.
- 356.
- 357.
- 358.
- 359.
- 360.
- 361.
- 362.
- 363.
- 364.
- 365.
- 366.
- 367.
- 368.
- 369.
- 370.
- 371.
- 372.
- 373.
- 374.
- 375.
- 376.
- 377.
- 378.
- 379.
- 380.
- 381.
- 382.
- 383.
- 384.
- 385.
- 386.
- 387.
- 388.
- 389.
- 390.
- 391.
- 392.
- 393.
- 394.
- 395.
- 396.
- 397.
- 398.
- 399.
- 400.
- 401.
- 402.
- 403.
- 404.
- 405.
- 406.
- 407.
- 408.
- 409.
- 410.
- 411.
- 412.
- 413.
- 414.
- 415.
- 416.
- 417.
- 418.
- 419.
- 420.
- 421.
- 422.
- 423.
- 424.
- 425.
- 426.
- 427.
- 428.
- 429.
- 430.
- 431.
- 432.
- 433.
- 434.
- 435.
- 436.
- 437.
- 438.
- 439.
- 440.
- 441.
- 442.
- 443.
- 444.
- 445.
- 446.
- 447.
- 448.
- 449.
- 450.
- 451.
- 452.
- 453.
- 454.
- 455.
- 456.
- 457.
- 458.
- 459.
- 460.
- 461.
- 462.
- 463.
- 464.
- 465.
- 466.
- 467.
- 468.
- 469.
- 470.
- 471.
- 472.
- 473.
- 474.
- 475.
- 476.
- 477.
- 478.
- 479.
- 480.
- 481.
- 482.
- 483.
- 484.
- 485.
- 486.
- 487.
- 488.
- 489.
- 490.
- 491.
- 492.
- 493.
- 494.
- 495.
- 496.
- 497.
- 498.
- 499.
- 500.
- 501.
- 502.
- 503.
- 504.
- 505.
- 506.
- 507.
- 508.
- 509.
- 510.
- 511.
- 512.
- 513.
- 514.
- 515.
- 516.
- 517.
- 518.
- 519.
- 520.
- 521.
- 522.
- 523.
- 524.
- 525.
- 526.
- 527.
- 528.
- 529.
- 530.
- 531.
- 532.
- 533.
- 534.
- 535.
- 536.
- 537.
- 538.
- 539.
- 540.
- 541.
- 542.
- 543.
- 544.
- 545.
- 546.
- 547.
- 548.
- 549.
- 550.
- 551.
- 552.
- 553.
- 554.
- 555.
- 556.
- 557.
- 558.
- 559.
- 560.
- 561.
- 562.
- 563.
- 564.
- 565.
- 566.
- 567.
- 568.
- 569.
- 570.
- 571.
- 572.
- 573.
- 574.
- 575.
- 576.
- 577.
- 578.
- 579.
- 580.
- 581.
- 582.
- 583.
- 584.
- 585.
- 586.
- 587.
- 588.
- 589.
- 590.
- 591.
- 592.
- 593.
- 594.
- 595.
- 596.
- 597.
- 598.
- 599.
- 600.
- 601.
- 602.
- 603.
- 604.
- 605.
- 606.
- 607.
- 608.
- 609.
- 610.
- 611.
- 612.
- 613.
- 614.
- 615.
- 616.
- 617.
- 618.
- 619.
- 620.
- 621.
- 622.
- 623.
- 624.
- 625.
总结
在旅游网页开发这片充满挑战的 “技术丛林” 里，我们常常因代码的晦涩、资源的匮乏而迷失方向。本文就像一位经验丰富的向导，引领我们走进 cursor、腾讯云 Edge MCP 和高德地图 MCP 2.0 构建的奇妙世界。开篇抛出技术融合的 “魔法石”，从痛点的 “泥沼” 中拉起苦苦挣扎的开发者。
接着，腾讯云 Edge MCP 化身贴心的代码精灵，以自然语言驱动开发，让网页部署如施魔法般快捷；高德地图 MCP 2.0 则是智慧的出行伙伴，一键生成专属地图，精准规划行程，让出行体验全面升级。
最后，通过实际呈现的旅游网页成果，导航的灵动指引、景点购票的便捷操作，就像一场精彩的魔术表演，向我们证明这三大工具携手，能将开发难题化作绚丽的技术烟火，不仅让旅游网页开发变得轻松有趣，更点亮了用户出行体验的璀璨星空，开启了旅游与技术融合的梦幻新旅程！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
