王炸组合！CodeBuddy + 高德MCP 2.0 ，快速解决考点附近订酒店难题！
🌟嗨，我是LucianaiB！
🌍 总有人间一两风，填我十万八千梦。
🚀 路漫漫其修远兮，吾将上下而求索。
我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
目录
1.背景
最近对象需要在上海的ATA国际认证中心考试。于是她让我帮预订一个酒店，作为一名有责任感的伴侣，预订一家地理位置优越、环境舒适的酒店自然成了我的首要任务。然而，面对携程上琳琅满目的酒店信息，对于像我这样的选择困难症患者来说，无疑是一场艰巨的挑战，各种价格、距离、评价看得我眼花缭乱，无从下手。
正当我焦头烂额之际，我敏锐地捕捉到高德地图全新推出的MCP 2.0所蕴含的巨大潜力。这项创新功能最令人称赞的特性在于：它能够一键生成用户的专属地图，将攻略中零散的地点标记、详细描述、以及精心规划的行程路线等个性化信息，无缝导入到高德地图App中，最终形成一张完全属于用户的私有地图。 更令人兴奋的是，在实际出行过程中，用户可以享受到从攻略浏览到一键导航、便捷打车的丝滑顺畅体验。
然而，要充分发挥高德MCP 2.0的强大功能，还需要一款高效且易于使用的开发工具来辅助我进行Python开发。这时，我想到了在腾讯内部拥有极高用户口碑的 CodeBuddy。据称，超过85%的腾讯开发者都在使用这款AI编程提效工具。 CodeBuddy的独特之处在于，它搭载了腾讯混元与DeepSeek混合模型，专为开发者量身打造。这款强大的代码助手不仅支持超过200种编程语言，完美兼容各种主流IDE，更是国内首个支持MCP的代码助手。更令人惊喜的是，CodeBuddy还为开发者提供了包括开发智能体Craft、智能代码补全、智能单元测试、代码智能诊断等一系列高效功能，旨在帮助开发者在编码过程中大幅节省宝贵时间，显著提升开发效率。数据显示，目前腾讯内部使用CodeBuddy的开发者，编码时间平均缩短40%以上，AI生成的代码占比超过四成，整体研发效率更是提升了惊人的16%。
正是看中了高德MCP 2.0的创新能力以及CodeBuddy的高效便捷，我决定利用这对“王炸组合”，亲手为我的另一半解决考点附近的酒店预订难题，让她能够全身心投入到备考之中，免受住宿问题的困扰。下面，就让我一步步地为大家详细展示如何利用这两款神器，轻松搞定考点附近的理想酒店。
2.效果展示
点击酒店（以**X四季枫林酒店(上海闵行开发区地铁站店)**为例）
地址：驾车规划 - 高德地图
3.开发流程
4.开始实操
4.1环境准备——下载CodeBuddy
（1）打开网站：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴，点击免费使用
（2）点击前往 JetBrains IDEs 插件市场，在跳转的页面点击Get，为Pycharm进行安装。
（3）安装完成后，在Pycharm中打开“腾讯云代码助手”面板（通常位于IDE的右侧或底部），然后使用您的腾讯云账号进行登录。登录成功后，您将看到如下所示的CodeBuddy界面。
（4）接下来，在您的本地计算机上新建一个文件夹，并将其命名为“CodeBuddy + 高德MCP 2.0”。然后在Pycharm中选择“File” -> “Open”，打开刚刚创建的这个文件夹，作为您的项目根目录。
4.2配置高德MCP 2.0
1.申请高德开放平台key
申请地址 ：https://console.amap.com/dev/key/app
使用下面的代码进行配置，替换下面的<YOUR_API_KEY>
{
"mcpServers": {
"amap-amap-sse": {
"url":"https://mcp.amap.com/sse?key=<YOUR_API_KEY>"
}
}
}
测试服务连接状态（如下，表示成功）：
4.3大模型需求描述
第一次模型交互
我要在5.16去上海的ATA国际认证中心考试，帮我筛选附近的酒店。要求如下：
1.帮我找到符合要求的5个酒店作为参考，要求，距离考试中心打车20分钟以内范围，价格在400-500之间
2.帮制作各个酒店到认证中心的路线图（自定义绘制路线和位置，不是之间嵌入PC地图，以打车后的路线为标记），用不同颜色的绘制在一个网页地图中，行程规划结果在实际高德地图app展示，并集成到h5页面中。。
3.网页使用简约美观页面风格，5个酒店的图片以卡片展示。
4.调用高德MCP Server - mcp_schema_personal_map工具，获取并打开专属地图链接
5.我的高德key为：fdda84b24b1c76f6f147
6.上海ATA国际认证中心的具体地址直接搜索，考试具体时间是8：00-12：00
7.生成文件名 LucianaiB.html。
## 基本要求
** 尺寸与基础结构 **
- 打印友好的配色方案，避免过深的背景色和过小的字体
** 技术实现 **
- 使用打印友好的CSS设计
- 提供专用的打印按钮，优化打印样式
- 使用高对比度的配色方案，确保打印后清晰可读
- 使用Google Fonts或其他CDN加载适合的现代字体
- 引用Font Awesome提供图标支持
** 专业设计技巧 **
- 使用简明的图示代替冗长文字描述
- 为重要信息添加视觉强调（如框线、加粗、不同颜色等）
- 在设计中融入城市地标元素作为装饰，增强辨识度
## 设计风格
- ** 实用为主的工具风格 ** ：以清晰的信息呈现为首要目标
- ** 专业旅行指南风格 ** ：参考Lonely Planet等专业旅游指南的排版和布局
- ** 信息图表风格 ** ：将复杂行程转化为直观的图表和时间轴
- ** 简约现代设计 ** ：干净的线条、充分的留白和清晰的层次结构
- ** 整洁的表格布局 ** ：使用表格组织景点、活动和时间信息
- ** 地图元素整合 ** ：在合适位置添加简化的路线或位置示意图
漫长等待过程ing
第二次模型交互
高德地图搜索这个名称来获取准确位置，酒店筛选标准：无，地图是可交互的地图组件，添加实际的"一键导航"功能
点击酒店（以**X四季枫林酒店(上海闵行开发区地铁站店)**为例）
效果页面地址预览：：驾车规划 - 高德地图
5.总结
这次利用腾讯云CodeBuddy与高德地图MCP 2.0的组合解决考点附近酒店预订问题的体验，对我而言是一次令人惊喜且高效的技术实践。这对“王炸组合”展现出了强大的协同作战能力，极大地简化了传统开发流程中繁琐的步骤。CodeBuddy作为智能编程助手，凭借其优秀的AI能力，能够准确理解我的自然语言需求，并迅速生成可用的代码，极大地提升了我的开发效率和问题解决速度。而高德MCP 2.0则提供了强大的地图服务和个性化定制能力，使得最终呈现给用户的H5页面不仅信息丰富，而且交互性极佳，真正实现了从用户需求到最终产品的快速转化。整体而言，这次体验充分展现了AI技术在赋能开发和提升用户体验方面的巨大潜力，也让我对未来的智能化开发充满了期待。
在这次体验中，腾讯云CodeBuddy的表现尤其令人称赞。它不仅仅是一个简单的代码补全工具，更像是一位智能的编程伙伴。通过清晰地理解我的自然语言需求，CodeBuddy能够精准地调用高德MCP Server的相关接口，并生成符合我要求的代码框架。在整个开发过程中，我几乎不需要花费大量时间去查阅复杂的API文档，而是通过与CodeBuddy进行自然流畅的“对话”，逐步完善我的应用功能。无论是初次筛选酒店，还是后续优化地图展示和添加导航功能，CodeBuddy都展现出了强大的理解和执行能力，极大地降低了我的开发门槛和时间成本。其智能代码提示和辅助功能，也让我在编写少量代码时就能实现复杂的功能，真正体会到了AI技术带来的高效与便捷。
另一方面，高德地图MCP 2.0的强大功能也为这次成功解决问题提供了坚实的基础。其一键生成专属地图的能力，让我能够轻松地将考点和周边的酒店信息整合到一张定制化的地图上。更重要的是，MCP 2.0提供了丰富的API接口和灵活的配置选项，使得我能够根据实际需求，在H5页面中嵌入可交互的地图组件，并实现诸如地点标注、路线规划和一键导航等实用功能。这些功能的实现，极大地提升了用户的使用体验，让我的另一半能够更加直观地了解考点周边的住宿情况和交通路线。可以说，高德MCP 2.0的专业地图服务能力和高度的自定义性，为最终解决方案的实用性和用户友好性提供了强有力的保障。
6.生成的html 页面源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上海ATA国际认证中心考试行程攻略</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #3598DB;
--secondary-color: #F39C12;
--dark-color: #2C3E50;
--light-color: #ECF0F1;
--accent-color: #27AE60;
--danger-color: #E74C3C;
--warning-color: #F1C40F;
--info-color: #3498DB;
--border-radius: 8px;
--card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
position: relative;
background-color: var(--primary-color);
color: white;
padding: 20px;
text-align: center;
border-radius: var(--border-radius);
margin-bottom: 30px;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://img.zcool.cn/community/016b5f59e163c3a801216a538aa3db.jpg@1280w_1l_2o_100sh.jpg');
background-size: cover;
background-position: center;
opacity: 0.15;
border-radius: var(--border-radius);
z-index: 0;
}
.header-content {
position: relative;
z-index: 1;
}
.header h1 {
font-size: 32px;
margin-bottom: 10px;
}
.header p {
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
}
.date-weather {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius);
padding: 10px;
margin-top: 15px;
display: inline-block;
}
.date-weather i {
margin-right: 5px;
}
.timeline {
position: relative;
margin: 40px 0;
padding: 20px;
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--card-shadow);
}
.timeline h2 {
text-align: center;
padding-bottom: 15px;
border-bottom: 2px solid var(--primary-color);
margin-bottom: 25px;
color: var(--dark-color);
}
.timeline-item {
display: flex;
margin-bottom: 30px;
position: relative;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-item::before {
content: '';
position: absolute;
left: 23px;
top: 30px;
bottom: -30px;
width: 4px;
background-color: var(--primary-color);
z-index: 0;
}
.timeline-item:last-child::before {
display: none;
}
.timeline-icon {
position: relative;
width: 50px;
height: 50px;
background-color: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
z-index: 1;
flex-shrink: 0;
}
.timeline-content {
flex: 1;
}
.timeline-content h3 {
margin-bottom: 5px;
color: var(--dark-color);
font-size: 20px;
}
.timeline-content p {
color: #666;
margin-bottom: 5px;
}
.hotels {
margin-top: 40px;
}
.hotels h2 {
text-align: center;
margin-bottom: 25px;
color: var(--dark-color);
position: relative;
padding-bottom: 10px;
}
.hotels h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: var(--primary-color);
}
.hotel-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
}
.hotel-card {
background-color: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--card-shadow);
transition: var(--transition);
}
.hotel-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.hotel-image {
width: 100%;
height: 180px;
overflow: hidden;
}
.hotel-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.hotel-card:hover .hotel-image img {
transform: scale(1.05);
}
.hotel-details {
padding: 20px;
}
.hotel-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: var(--dark-color);
}
.hotel-address {
font-size: 14px;
color: #666;
margin-bottom: 10px;
display: flex;
align-items: flex-start;
}
.hotel-address i {
margin-right: 5px;
margin-top: 4px;
color: var(--primary-color);
}
.hotel-info {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
}
.hotel-info-item {
width: 50%;
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
}
.hotel-info-item i {
color: var(--primary-color);
margin-right: 5px;
font-size: 16px;
}
.hotel-rating {
display: flex;
align-items: center;
margin-top: 10px;
}
.hotel-rating .rating-stars {
color: #FFD700;
margin-right: 5px;
}
.hotel-rating .rating-number {
font-weight: bold;
color: var(--dark-color);
}
.map-section {
margin-top: 40px;
padding: 30px;
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--card-shadow);
}
.map-section h2 {
text-align: center;
margin-bottom: 25px;
color: var(--dark-color);
position: relative;
padding-bottom: 10px;
}
.map-section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: var(--primary-color);
}
.map-container {
width: 100%;
height: 500px;
border-radius: var(--border-radius);
overflow: hidden;
}
.hotel-route {
margin-top: 15px;
font-size: 14px;
display: flex;
align-items: center;
}
.hotel-route .route-color {
width: 20px;
height: 8px;
border-radius: 4px;
margin-right: 10px;
}
.route-1 {
background-color: #FF5733;
}
.route-2 {
background-color: #33FF57;
}
.route-3 {
background-color: #3357FF;
}
.route-4 {
background-color: #FF33E9;
}
.route-5 {
background-color: #33FFF9;
}
.map-app-link {
text-align: center;
margin-top: 20px;
}
.map-app-button {
display: inline-block;
padding: 12px 25px;
background-color: var(--primary-color);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
font-weight: 500;
transition: var(--transition);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.map-app-button:hover {
background-color: #2980B9;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.map-app-button i {
margin-right: 8px;
}
.footer {
margin-top: 40px;
text-align: center;
padding: 20px;
color: #777;
font-size: 14px;
}
.footer p {
margin-bottom: 10px;
}
.print-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 16px;
transition: var(--transition);
}
.print-button:hover {
background-color: #219651;
}
.print-button i {
margin-right: 8px;
}
@media print {
body {
background-color: white;
}
.container {
max-width: 100%;
padding: 0;
}
.header {
background-color: #f0f0f0;
color: black;
}
.header::before {
opacity: 0.05;
}
.header p {
color: #333;
}
.date-weather {
background-color: #f5f5f5;
color: #333;
}
.timeline-icon {
background-color: #333;
}
.timeline-item::before {
background-color: #333;
}
.hotel-info-item i,
.hotel-address i {
color: #333;
}
.hotel-rating .rating-stars {
color: #333;
}
.hotel-card:hover {
transform: none;
box-shadow: var(--card-shadow);
}
.hotel-card:hover .hotel-image img {
transform: none;
}
.map-section,
.print-button,
.map-app-link {
display: none;
}
.hotel-cards {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.container {
padding: 15px;
}
.header h1 {
font-size: 26px;
}
.header p {
font-size: 16px;
}
.hotel-cards {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.map-container {
height: 350px;
}
}
@media (max-width: 480px) {
.timeline-item {
flex-direction: column;
}
.timeline-icon {
margin-bottom: 15px;
margin-right: 0;
}
.timeline-item::before {
left: 25px;
top: 50px;
}
.hotel-cards {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<div class="header-content">
<h1>上海ATA国际认证中心考试行程攻略</h1>
<p>2025年5月16日 | 酒店优选 & 路线规划</p>
<div class="date-weather">
<i class="fas fa-calendar-alt"></i> 5月16日 小雨 26~21℃ 东南风1-3级
</div>
</div>
</header>
<div class="timeline">
<h2>行程时间轴</h2>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-bed"></i>
</div>
<div class="timeline-content">
<h3>08:00-08:30</h3>
<p>酒店出发，打车前往ATA国际认证中心</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-user-check"></i>
</div>
<div class="timeline-content">
<h3>09:00</h3>
<p>考试签到</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-pencil-alt"></i>
</div>
<div class="timeline-content">
<h3>09:30-12:00</h3>
<p>考试进行</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-utensils"></i>
</div>
<div class="timeline-content">
<h3>12:00后</h3>
<p>可前往周边景区/餐饮，建议打车出行</p>
</div>
</div>
</div>
<section class="hotels">
<h2>推荐酒店</h2>
<div class="hotel-cards">
<div class="hotel-card">
<div class="hotel-image">
<img src="http://store.is.autonavi.com/showpic/5550ab13760462e8ecdc1bed4b84f57c" alt="格林豪泰酒店">
</div>
<div class="hotel-details">
<div class="hotel-name">格林豪泰酒店(江川路1551号101幢店)</div>
<div class="hotel-address">
<i class="fas fa-map-marker-alt"></i>
<span>江川路1551号101栋</span>
</div>
<div class="hotel-info">
<div class="hotel-info-item">
<i class="fas fa-car"></i>
<span>打车约8分钟</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-road"></i>
<span>距离2.3公里</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-money-bill-wave"></i>
<span>价格约¥350-450</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-subway"></i>
<span>近闵行开发区站</span>
</div>
</div>
<div class="hotel-rating">
<div class="rating-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="rating-number">4.6/5.0</div>
</div>
</div>
</div>
<div class="hotel-card">
<div class="hotel-image">
<img src="http://store.is.autonavi.com/showpic/7e6bf3755e2b50f012072544d77d9fe1" alt="X四季枫林酒店">
</div>
<div class="hotel-details">
<div class="hotel-name">X四季枫林酒店(上海闵行开发区地铁站店)</div>
<div class="hotel-address">
<i class="fas fa-map-marker-alt"></i>
<span>江川路1565弄2-3号</span>
</div>
<div class="hotel-info">
<div class="hotel-info-item">
<i class="fas fa-car"></i>
<span>打车约8分钟</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-road"></i>
<span>距离2.2公里</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-money-bill-wave"></i>
<span>价格约¥360-460</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-subway"></i>
<span>近闵行开发区站</span>
</div>
</div>
<div class="hotel-rating">
<div class="rating-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="rating-number">4.7/5.0</div>
</div>
</div>
</div>
<div class="hotel-card">
<div class="hotel-image">
<img src="http://store.is.autonavi.com/showpic/e50d94f6af0e1d4b90b89561e80292e0" alt="虎鲨电竞酒店">
</div>
<div class="hotel-details">
<div class="hotel-name">虎鲨电竞酒店(上海闵行开发区地铁站店)</div>
<div class="hotel-address">
<i class="fas fa-map-marker-alt"></i>
<span>江川路1565弄2号</span>
</div>
<div class="hotel-info">
<div class="hotel-info-item">
<i class="fas fa-car"></i>
<span>打车约8分钟</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-road"></i>
<span>距离2.2公里</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-money-bill-wave"></i>
<span>价格约¥380-480</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-subway"></i>
<span>近闵行开发区站</span>
</div>
</div>
<div class="hotel-rating">
<div class="rating-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="rating-number">4.6/5.0</div>
</div>
</div>
</div>
<div class="hotel-card">
<div class="hotel-image">
<img src="http://store.is.autonavi.com/showpic/7285eb05d7f874c4a4b9ac73c381b991" alt="爱心酒店">
</div>
<div class="hotel-details">
<div class="hotel-name">爱心酒店(上海闵行开发区地铁站店)</div>
<div class="hotel-address">
<i class="fas fa-map-marker-alt"></i>
<span>江川路1552号</span>
</div>
<div class="hotel-info">
<div class="hotel-info-item">
<i class="fas fa-car"></i>
<span>打车约8分钟</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-road"></i>
<span>距离2.2公里</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-money-bill-wave"></i>
<span>价格约¥320-420</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-subway"></i>
<span>近闵行开发区站</span>
</div>
</div>
<div class="hotel-rating">
<div class="rating-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<i class="far fa-star"></i>
</div>
<div class="rating-number">3.8/5.0</div>
</div>
</div>
</div>
<div class="hotel-card">
<div class="hotel-image">
<img src="http://store.is.autonavi.com/showpic/526078aff43fa6ed1e2a3007b1698199" alt="神韵之星精品酒店公寓">
</div>
<div class="hotel-details">
<div class="hotel-name">神韵之星精品酒店公寓(江川路1号分店)</div>
<div class="hotel-address">
<i class="fas fa-map-marker-alt"></i>
<span>江川路1551号-89幢</span>
</div>
<div class="hotel-info">
<div class="hotel-info-item">
<i class="fas fa-car"></i>
<span>打车约8分钟</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-road"></i>
<span>距离2.2公里</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-money-bill-wave"></i>
<span>价格约¥350-450</span>
</div>
<div class="hotel-info-item">
<i class="fas fa-subway"></i>
<span>近闵行开发区站</span>
</div>
</div>
<div class="hotel-rating">
<div class="rating-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="rating-number">1.9/5.0</div>
</div>
</div>
</div>
</div>
</section>
<section class="map-section">
<h2>酒店到认证中心路线图</h2>
<div class="map-container">
<div style="width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#f5f5f5; border-radius:var(--border-radius);">
<img src="https://restapi.amap.com/v3/staticmap?location=121.361654,31.000977&zoom=14&size=1000*500&markers=mid,,A:121.361654,31.000977|mid,,B:121.374500,30.994298|mid,,C:121.372094,30.993746|mid,,D:121.372077,30.993709|mid,,E:121.374575,30.995025|mid,,F:121.373368,30.994094&key=fdda842keyf355b24b1c76f6f147" alt="酒店到认证中心路线图" style="max-width:100%; max-height:100%; border-radius:var(--border-radius);">
</div>
</div>
<div style="margin-top: 20px;">
<div class="hotel-route">
<div class="route-color route-1"></div>
<span>ATA国际认证中心-格林豪泰酒店路线（2.3公里，约8分钟）</span>
</div>
<div class="hotel-route">
<div class="route-color route-2"></div>
<span>ATA国际认证中心-X四季枫林酒店路线（2.2公里，约8分钟）</span>
</div>
<div class="hotel-route">
<div class="route-color route-3"></div>
<span>ATA国际认证中心-虎鲨电竞酒店路线（2.2公里，约8分钟）</span>
</div>
<div class="hotel-route">
<div class="route-color route-4"></div>
<span>ATA国际认证中心-爱心酒店路线（2.2公里，约8分钟）</span>
</div>
<div class="hotel-route">
<div class="route-color route-5"></div>
<span>ATA国际认证中心-神韵之星精品酒店公寓路线（2.2公里，约8分钟）</span>
</div>
</div>
<div class="map-app-link">
<a href="https://uri.amap.com/marker?position=121.361654,31.000977,121.374500,30.994298,121.372094,30.993746,121.372077,30.993709,121.374575,30.995025,121.373368,30.994094&name=上海ATA国际认证中心,格林豪泰酒店,X四季枫林酒店,虎鲨电竞酒店,爱心酒店,神韵之星精品酒店公寓&src=mypage&coordinate=gaode&callnative=1" class="map-app-button" target="_blank">
<i class="fas fa-map-marked-alt"></i>在高德地图中查看详细路线
</a>
</div>
</section>
<button class="print-button" onclick="window.print()">
<i class="fas fa-print"></i>打印行程
</button>
<footer class="footer">
<p>上海ATA国际认证中心地址：上海市闵行区碧溪路55号7幢</p>
<p>考试时间：2025年5月16日 09:00-12:00</p>
<p>建议提前30分钟到达考场</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 检查是否支持打印功能
if (!window.print) {
const printButton = document.querySelector('.print-button');
if (printButton) {
printButton.style.display = 'none';
}
}
});
</script>
</body>
</html>
嗨，我是LucianaiB。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。
点击这里👉LucianaiB ，获取最新动态，⚡️ 让信息传递更加迅速。
扫一扫
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
