本文作者：摘星，TRAE 开发者用户
摘要
近期我使用 TRAE AI IDE 结合高德 MCP 2.0 协议，开发了一个智能化的武汉旅游攻略系统。这次实践让我深深感受到了 AI 与传统地图服务结合的巨大潜力。
作为一名长期关注 AI 开发工具的技术爱好者，我一直在寻找能够真正提高开发效率的工具。当我接触到 TRAE 这款 AI IDE 时，它的自然语言编程能力就深深吸引了我。而高德地图推出的 MCP 2.0 协议，更是为 AI 应用提供了标准化的地理信息服务接口，这让我看到了无限的可能性。
在这次武汉国庆旅游项目中，我仅仅通过自然语言描述需求，TRAE 就能自动生成包含路线规划、天气查询、POI 搜索等功能的完整网页应用。整个开发过程就像是在与一位经验丰富的开发伙伴对话，我只需要描述想要什么功能，它就能理解我的意图并转化为具体的代码实现。
最让我印象深刻的是，这个系统不仅能够规划出科学合理的旅游路线，还能实时考虑天气因素、交通状况、景点开放时间等多维度信息，真正做到了智能化的旅行规划。从地理编码到路径规划，从 POI 搜索到天气查询，高德 MCP 2.0 提供的 14 项核心能力覆盖了出行场景的方方面面，而 TRAE 则将这些能力完美地整合到了用户友好的界面中。
效果演示
edgeone pages 部署的在线地址：
武汉四天三夜旅行攻略:mcp.edgeone.site/share/ttob_...
TRAE AI IDE：重新定义开发体验
1. 工具概述
TRAE (TRAE - The Real AI Engineer) www.trae.cn/
shell
# TRAE安装非常简单
# 1. 访问官网 https://www.TRAE.cn/
# 2. 根据操作系统下载对应版本
# 3. 按照安装向导完成安装
# 4. 启动后即可开始AI驱动的开发体验
2. 核心特性
TRAE 的核心优势在于它能够理解开发者的自然语言意图，并将其转化为具体的代码实现：
javascript
// 传统开发方式需要手写大量代码
function createTravelRoute(startPoint, endPoint) {
// 复杂的路径规划逻辑
// 地理编码处理
// API调用封装
// 错误处理
// ...数百行代码
}
// 在TRAE中，只需要描述需求：
// "创建一个武汉旅游路线规划功能，包含景点推荐、路径优化、天气查询"
// AI会自动生成完整的实现代码
图 1：TRAE 与高德 MCP 技术架构图 - 展示了 AI IDE 与地图服务的深度集成架构
高德 MCP 2.0：AI 时代的地图服务革命
1. 高德 MCP 介绍
高德 MCP2.0 简介
高德 MCP2.0 实际上是大模型+高德 MCP1.0 的组合体，是真正的给 AI 装上了翅膀。
真正让高德贯穿你的行前-行中-行后始终，让每个人都能轻松拥有一个"真正懂你的出行秘书"。
高德 MCP2.0 架构
高德 MCP 采用的标准的 MCP 协议以及 CS 架构，用户在 AI IDE 中 Client 输入自然语言需求，发送到 MCP Server 进行处理。
高德 MCP2.0 能力介绍
| 功能 | 描述 | 输入 | 输出 |
|---|---|---|---|
| 生成专属地图小程序 | 将出行规划方案导入高德地图，生成专属（旅行）地图小程序 | 行程名称、行程详情（每日行程描述、行程途径点位） | 专属小程序跳转链接 |
| 导航到目的地 | 根据用户传入经纬度，启动导航 | 目的地经纬度 | 高德导航跳转链接 |
| 打车 | 根据用户输入起终经纬度坐标，发起打车请求 | origin （起点经纬度），destination （终点经纬度） | 高德打车唤端链接 |
| 地理编码 | 将详细的结构化地址转换为经纬度坐标 | address （位置信息），city （城市信息，非必须） | location （位置经纬度） |
| 逆地理编码 | 将一个高德经纬度坐标转换为行政区划地址信息 location （位置经纬度） | location （位置经纬度） | addressComponent （位置信息，包括省市区等信息） |
| IP 定位 | 根据用户输入的 IP 地址，定位 IP 的所在位置 | IP | province （省），city （城市），adcode （城市编码） |
| 天气查询 | 根据城市名称或者标准 adcode 查询指定城市的天气 | city （城市名称或城市 adcode） | forecasts （预报天气） |
| 骑行路径规划 | 规划骑行通勤方案，最大支持 500km | origin （起点经纬度），destination （终点经纬度） | distance （规划距离），duration （规划时间），steps （规划步骤信息） |
| 步行路径规划 | 规划 100km 以内的步行通勤方案 | origin （起点经纬度），destination （终点经纬度 | origin （起点信息），destination （终点信息），paths （规划具体信息） |
| 驾车路径规划 | 规划以小客车、轿车通勤出行的方案 | origin （起点经纬度），destination （终点经纬度） | origin （起点信息），destination （终点信息），paths （规划具体信息） |
| 公交路径规划 | 规划综合各类公共交通方式的通勤方案 | origin （起点经纬度），destination （终点经纬度），city （起点城市），cityd （终点城市） | origin （起点信息），destination （终点信息），distance （规划距离），transits （规划具体信息） |
| 距离测量 | 测量两个经纬度坐标之间的距离 | origin （起点经纬度），destination （终点经纬度） | origin_id （起点信息），dest_id （终点信息），distance （规划距离），duration （时间） |
| 关键词搜索 | 根据用户传入关键词，搜索相关的 POI（兴趣点）地点信息 | keywords （搜索关键词），city （查询城市，非必须） | suggestion （搜索建议），pois （地点信息列表） |
| 周边搜索 | 搜索指定坐标周围半径范围内的 POI 地点信息 | keywords （搜索关键词），location （中心点经度纬度），radius （搜索半径，非必须） | pois （地点信息列表） |
| 详情搜索 | 查询 POI ID 的详细信息 | id （关键词搜或周边搜获取的 poiid） | 地点详情信息：location （地点经纬度），address （地址），business_area （商圈），city（城市），type （地点类型） 等 |
2. 访问高德地图开发平台
1. 访问高德开发平台：
开发 | 高德地图 API:lbs.amap.com/api
2. 查看高德 MCP Servers 文档
概述-MCP Server | 高德地图 API:lbs.amap.com/api/mcp-ser...
3. 参考高德官方给出的示例进行 MCP 的配置
3. 创建高德 API KEY
登录高德开发者平台控制台
首页 | 高德控制台: console.amap.com/dev/index
进入应用管理
我的应用 | 高德控制台: console.amap.com/dev/key/app
创建 API KEY
4. 配置高德 MCP
直接复制下方的 json，导入到 TRAE 中
json
{
"mcpServers": {
"amap-maps-streamableHTTP": {
"url": "https://mcp.amap.com/mcp?key=您的密钥"
}
}
}
可以看到高德地图提供的工具，如此现实便是配置成功
武汉旅游项目实战开发
1. 项目需求分析
这次实践的目标是为国庆节制作一个武汉 4 天旅游攻略，具体需求包括：
"在快速发展的 AI 时代，最重要的不是掌握所有技术细节，而是学会如何与 AI 协作，让技术为创意服务。"
------ 摘星
图 2：用户交互时序图 - 展示从需求输入到攻略生成的完整流程
2. 设计好 AI Coding 提示词
参考官方的提示词案例，根据你的具体业务需求设计出 AI Coding 提示词：
css
制定一个十一计划去武汉游玩4天的旅行攻略。
1、帮我制作旅行攻略，考虑出行时间和路线，以及天气状况路线规划。
2、制作网页地图自定义绘制旅游路线和位置。 网页使用现代美学页面风格，景区图片以卡片展示。
3、行程规划结果在高德地图app展示，并集成到h5页面中。
4、同一天行程景区之间我想打车前往。
5、生成文件名 kmTravel.html。3. TRAE 根据提示词开发
将设计好的提示词输入到 TRAE 中，TRAE 就会自动设计出网页，并且调用高德 MCP2.0 中提供的功能设计好路线规划，并且会在网页中展示：
4. 迭代开发
在开发的过程中会遇到各种各样的问题，这时候需要我们指导 AI，根据我们想要的内容进行改正：
5. 部署上线
为了演示效果，我才用了 EdgeOne Pages 将本页面部署上线，这样大家就可以继续预览访问了
调用edgeone pages mcp将本项目部署为在线网页6. 武汉旅游攻略开发流程图
图 3：武汉旅游攻略开发流程图 -展示从需求分析到系统部署的完整开发流程
部署与上线
1. EdgeOne Pages 部署与上线
项目最终部署到了腾讯云 EdgeOne Pages 平台，实现了全球 CDN 加速：
shell
# 部署配置
# 项目文件：kmTravel.html
# 部署平台：EdgeOne Pages
# 访问地址：https://mcp.edgeone.site/share/ttob_xJRB8TOxiYYkIt1z
# 部署步骤：
# 1. 构建优化后的HTML文件
# 2. 配置CDN加速节点
# 3. 设置SSL证书
# 4. 绑定自定义域名2. 项目源码
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>武汉四天三夜旅行攻略</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 请替换为您的高德地图API密钥 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API密钥"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.hero-bg {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/id/1036/1920/1080');
background-size: cover;
background-position: center;
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.map-container {
height: 400px;
width: 100%;
}
.itinerary-day {
scroll-margin-top: 80px;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- 导航栏 -->
<nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50 transition-all duration-300" id="navbar">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="#" class="flex items-center space-x-2">
<i class="fa fa-map-o text-red-500 text-2xl"></i>
<span class="font-bold text-xl text-red-500">武汉旅行攻略</span>
</a>
<div class="hidden md:flex space-x-6">
<a href="#overview" class="hover:text-red-500 transition-colors">行程概览</a>
<a href="#day1" class="hover:text-red-500 transition-colors">第一天</a>
<a href="#day2" class="hover:text-red-500 transition-colors">第二天</a>
<a href="#day3" class="hover:text-red-500 transition-colors">第三天</a>
<a href="#day4" class="hover:text-red-500 transition-colors">第四天</a>
<a href="#map" class="hover:text-red-500 transition-colors">旅行地图</a>
</div>
<button class="md:hidden text-gray-700" id="menu-toggle">
<i class="fa fa-bars text-xl"></i>
</button>
</div>
<!-- 移动端菜单 -->
<div class="md:hidden hidden bg-white w-full" id="mobile-menu">
<div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
<a href="#overview" class="hover:text-red-500 transition-colors py-2 border-b border-gray-100">行程概览</a>
<a href="#day1" class="hover:text-red-500 transition-colors py-2 border-b border-gray-100">第一天</a>
<a href="#day2" class="hover:text-red-500 transition-colors py-2 border-b border-gray-100">第二天</a>
<a href="#day3" class="hover:text-red-500 transition-colors py-2 border-b border-gray-100">第三天</a>
<a href="#day4" class="hover:text-red-500 transition-colors py-2 border-b border-gray-100">第四天</a>
<a href="#map" class="hover:text-red-500 transition-colors py-2">旅行地图</a>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<header class="hero-bg h-screen flex items-center justify-center text-white pt-16">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4 animate-fade-in">武汉四天三夜旅行攻略</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">探索江城武汉的历史文化与自然风光，体验独特的荆楚魅力</p>
<a href="#overview" class="inline-block bg-red-500 hover:bg-red-600 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105">开始探索</a>
</div>
</header>
<!-- 行程概览 -->
<section id="overview" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-2 text-center">行程概览</h2>
<p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">2024年10月1日至4日，武汉之旅</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<!-- 天气卡片 -->
<div class="bg-blue-50 rounded-xl p-6 shadow-sm card-hover">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">天气状况</h3>
<i class="fa fa-sun-o text-yellow-500 text-xl"></i>
</div>
<ul class="space-y-3">
<li class="flex justify-between"><span>10月1日</span><span class="font-medium">多云到晴天 15-26°C</span></li>
<li class="flex justify-between"><span>10月2日</span><span class="font-medium">晴天 12-24°C</span></li>
<li class="flex justify-between"><span>10月3日</span><span class="font-medium">晴天到多云 12-24°C</span></li>
<li class="flex justify-between"><span>10月4日</span><span class="font-medium">晴天到多云 13-24°C</span></li>
</ul>
</div>
<!-- 交通卡片 -->
<div class="bg-green-50 rounded-xl p-6 shadow-sm card-hover">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">交通方式</h3>
<i class="fa fa-taxi text-green-500 text-xl"></i>
</div>
<p class="mb-4">市内主要景点之间均选择打车前往，方便快捷</p>
<div class="flex items-center text-sm text-gray-600">
<i class="fa fa-info-circle text-blue-500 mr-2"></i>
<span>高峰期可能会有拥堵，请预留充足时间</span>
</div>
</div>
<!-- 景点卡片 -->
<div class="bg-purple-50 rounded-xl p-6 shadow-sm card-hover">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">主要景点</h3>
<i class="fa fa-map-marker text-purple-500 text-xl"></i>
</div>
<ul class="space-y-2 text-sm">
<li>• 黄鹤楼</li>
<li>• 东湖风景区</li>
<li>• 湖北省博物馆</li>
<li>• 汉口江滩</li>
<li>• 知音号</li>
<li>• 归元寺</li>
</ul>
</div>
<!-- 美食卡片 -->
<div class="bg-red-50 rounded-xl p-6 shadow-sm card-hover">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">特色美食</h3>
<i class="fa fa-cutlery text-red-500 text-xl"></i>
</div>
<ul class="space-y-2 text-sm">
<li>• 热干面</li>
<li>• 豆皮</li>
<li>• 鸭脖</li>
<li>• 武昌鱼</li>
<li>• 糊汤粉</li>
<li>• 烧卖</li>
</ul>
</div>
<!-- 住宿建议卡片 -->
<div class="bg-indigo-50 rounded-xl p-6 shadow-sm card-hover">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">住宿建议</h3>
<i class="fa fa-bed text-indigo-500 text-xl"></i>
</div>
<ul class="space-y-2 text-sm">
<li>• 武昌区：靠近黄鹤楼、户部巷等景点</li>
<li>• 江汉区：商业中心，交通便利</li>
<li>• 汉口江滩附近：夜景优美</li>
<li>• 建议提前1-2周预订酒店</li>
<li>• 推荐连锁酒店或特色民宿</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 第一天行程 -->
<section id="day1" class="itinerary-day py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex items-center mb-8">
<div class="bg-red-500 text-white font-bold rounded-full w-12 h-12 flex items-center justify-center mr-4">1</div>
<h2 class="text-3xl font-bold">第一天 (10月1日)</h2>
</div>
<p class="text-gray-600 mb-8">多云到晴天，偏北风4-5级，15-26°C</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<!-- 景点1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1037/600/400" alt="黄鹤楼" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">黄鹤楼</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">上午</span>
</div>
<p class="text-gray-600 mb-4">武汉的标志性建筑之一，位于蛇山之巅，登上黄鹤楼可以俯瞰武汉三镇的美景。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 8:00-18:00</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 70元/人</span>
</div>
</div>
</div>
<!-- 景点2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1038/600/400" alt="户部巷" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">户部巷</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">中午</span>
</div>
<p class="text-gray-600 mb-4">武汉著名的小吃街，这里有各种各样的美食，如热干面、豆皮、鸭脖等。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 全天</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 免费</span>
</div>
</div>
</div>
<!-- 景点3 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1039/600/400" alt="长江大桥" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">长江大桥</h3>
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">下午</span>
</div>
<p class="text-gray-600 mb-4">横跨长江的第一座大桥，也是武汉的标志性建筑之一，可以在桥上散步，欣赏江景。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 全天</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 免费</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-semibold mb-4">行程路线</h3>
<div class="flex items-start space-x-4">
<div class="flex flex-col items-center mt-1">
<div class="bg-orange-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">1</div>
<div class="w-0.5 h-full bg-gray-200 my-2"></div>
<div class="bg-orange-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">2</div>
<div class="w-0.5 h-full bg-gray-200 my-2"></div>
<div class="bg-orange-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">3</div>
</div>
<div class="flex-1 space-y-6">
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">黄鹤楼</h4>
<p class="text-sm text-gray-600 mt-1">上午9:00-11:30游览黄鹤楼，欣赏武汉全景</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2.5小时</span>
</div>
</div>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>打车前往户部巷</span>
<span>约5公里，车程15分钟</span>
</div>
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">户部巷</h4>
<p class="text-sm text-gray-600 mt-1">中午12:00-13:30在户部巷品尝武汉特色美食</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约1.5小时</span>
</div>
</div>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>打车前往长江大桥</span>
<span>约2公里，车程10分钟</span>
</div>
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">长江大桥</h4>
<p class="text-sm text-gray-600 mt-1">下午14:00-16:00漫步长江大桥，欣赏江景</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2小时</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 第二天行程 -->
<section id="day2" class="itinerary-day py-16 bg-white">
<div class="container mx-auto px-4">
<div class="flex items-center mb-8">
<div class="bg-red-500 text-white font-bold rounded-full w-12 h-12 flex items-center justify-center mr-4">2</div>
<h2 class="text-3xl font-bold">第二天 (10月2日)</h2>
</div>
<p class="text-gray-600 mb-8">晴天，偏北风3-4级，12-24°C</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<!-- 景点1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/250/600/400" alt="湖北省博物馆" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">湖北省博物馆</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">上午</span>
</div>
<p class="text-gray-600 mb-4">馆内收藏了大量的历史文物和艺术品，如曾侯乙编钟、越王勾践剑等。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 9:00-17:00(周一闭馆)</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 免费(需提前预约)</span>
</div>
</div>
</div>
<!-- 景点2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1041/600/400" alt="东湖风景区" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">东湖风景区</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">中午</span>
</div>
<p class="text-gray-600 mb-4">是中国最大的城中湖，景色秀丽，可以乘船游览湖光山色，也可以骑行或散步。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 全天</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 免费(部分景点收费)</span>
</div>
</div>
</div>
<!-- 景点3 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1042/600/400" alt="武汉大学" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">武汉大学</h3>
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">下午</span>
</div>
<p class="text-gray-600 mb-4">中国最美丽的大学之一，校园内有许多古老的建筑和美丽的花园。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 全天</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 免费</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-semibold mb-4">行程路线</h3>
<div class="flex items-start space-x-4">
<div class="flex flex-col items-center mt-1">
<div class="bg-orange-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">1</div>
<div class="w-0.5 h-full bg-gray-200 my-2"></div>
<div class="bg-orange-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">2</div>
<div class="w-0.5 h-full bg-gray-200 my-2"></div>
<div class="bg-orange-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">3</div>
</div>
<div class="flex-1 space-y-6">
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">湖北省博物馆</h4>
<p class="text-sm text-gray-600 mt-1">上午9:00-11:30参观湖北省博物馆，欣赏珍贵文物</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2.5小时</span>
</div>
</div>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>打车前往东湖风景区</span>
<span>约3公里，车程10分钟</span>
</div>
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">东湖风景区</h4>
<p class="text-sm text-gray-600 mt-1">中午12:00-14:30在东湖风景区游览，可选择骑行或乘船</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2.5小时</span>
</div>
</div>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>打车前往武汉大学</span>
<span>约5公里，车程15分钟</span>
</div>
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">武汉大学</h4>
<p class="text-sm text-gray-600 mt-1">下午15:00-17:00漫步武大校园，欣赏古老建筑</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2小时</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 第三天行程 -->
<section id="day3" class="itinerary-day py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex items-center mb-8">
<div class="bg-red-500 text-white font-bold rounded-full w-12 h-12 flex items-center justify-center mr-4">3</div>
<h2 class="text-3xl font-bold">第三天 (10月3日)</h2>
</div>
<p class="text-gray-600 mb-8">晴天到多云，偏北风3-4级转2-3级，12-24°C</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<!-- 景点1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1058/600/400" alt="江汉路步行街" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">江汉路步行街</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">上午</span>
</div>
<p class="text-gray-600 mb-4">武汉最繁华的商业街之一，有许多商场、餐厅和娱乐场所。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 全天</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 免费</span>
</div>
</div>
</div>
<!-- 景点2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1044/600/400" alt="汉口江滩" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">汉口江滩</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">中午</span>
</div>
<p class="text-gray-600 mb-4">武汉的滨江公园，这里有美丽的江景和休闲设施，可以在江边散步、放风筝。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 全天</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 免费</span>
</div>
</div>
</div>
<!-- 景点3 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1045/600/400" alt="知音号" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">知音号</h3>
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">晚上</span>
</div>
<p class="text-gray-600 mb-4">一艘复古的轮船，晚上可以乘坐知音号游览长江，欣赏夜景和表演。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>演出时间: 19:30-21:00</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 228元/人起</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-semibold mb-4">行程路线</h3>
<div class="flex items-start space-x-4">
<div class="flex flex-col items-center mt-1">
<div class="bg-red-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">1</div>
<div class="w-0.5 h-full bg-gray-200 my-2"></div>
<div class="bg-red-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">2</div>
<div class="w-0.5 h-full bg-gray-200 my-2"></div>
<div class="bg-red-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">3</div>
</div>
<div class="flex-1 space-y-6">
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">江汉路步行街</h4>
<p class="text-sm text-gray-600 mt-1">上午9:30-11:30在江汉路步行街购物、观光</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2小时</span>
</div>
</div>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>打车前往汉口江滩</span>
<span>约2公里，车程10分钟</span>
</div>
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">汉口江滩</h4>
<p class="text-sm text-gray-600 mt-1">中午12:00-14:30在汉口江滩游览，欣赏江景</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2.5小时</span>
</div>
</div>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>打车前往知音号码头</span>
<span>约3公里，车程15分钟</span>
</div>
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">知音号</h4>
<p class="text-sm text-gray-600 mt-1">晚上19:00-21:30乘坐知音号，欣赏长江夜景和表演</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2.5小时</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 第四天行程 -->
<section id="day4" class="itinerary-day py-16 bg-white">
<div class="container mx-auto px-4">
<div class="flex items-center mb-8">
<div class="bg-red-500 text-white font-bold rounded-full w-12 h-12 flex items-center justify-center mr-4">4</div>
<h2 class="text-3xl font-bold">第四天 (10月4日)</h2>
</div>
<p class="text-gray-600 mb-8">晴天到多云，偏北风2-3级，13-24°C</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<!-- 景点1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/164/600/400" alt="归元寺" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">归元寺</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">上午</span>
</div>
<p class="text-gray-600 mb-4">武汉著名的佛教寺庙，寺内有许多古老的建筑和佛像。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 8:00-17:00</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 10元/人</span>
</div>
</div>
</div>
<!-- 景点2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1080/600/400" alt="午餐" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">特色午餐</h3>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">中午</span>
</div>
<p class="text-gray-600 mb-4">品尝武汉特色美食，如热干面、豆皮、武昌鱼等。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>建议时间: 11:30-13:00</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-map-marker mr-2"></i>
<span>推荐地点: 归元寺周边餐厅</span>
</div>
</div>
</div>
<!-- 景点3 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/id/1047/600/400" alt="古琴台" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-semibold">古琴台</h3>
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">下午</span>
</div>
<p class="text-gray-600 mb-4">又名俞伯牙台，是中国音乐文化古迹之一。</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span>开放时间: 8:30-17:30</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fa fa-ticket mr-2"></i>
<span>门票: 15元/人</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-semibold mb-4">行程路线</h3>
<div class="flex items-start space-x-4">
<div class="flex flex-col items-center mt-1">
<div class="bg-red-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">1</div>
<div class="w-0.5 h-full bg-gray-200 my-2"></div>
<div class="bg-red-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">2</div>
<div class="w-0.5 h-full bg-gray-200 my-2"></div>
<div class="bg-red-500 rounded-full w-8 h-8 flex items-center justify-center text-white font-medium">3</div>
</div>
<div class="flex-1 space-y-6">
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">归元寺</h4>
<p class="text-sm text-gray-600 mt-1">上午9:00-11:00参观归元寺，感受佛教文化</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2小时</span>
</div>
</div>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>打车前往午餐地点</span>
<span>约1公里，车程5分钟</span>
</div>
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">特色午餐</h4>
<p class="text-sm text-gray-600 mt-1">中午11:30-13:00品尝武汉特色美食</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约1.5小时</span>
</div>
</div>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>打车前往古琴台</span>
<span>约4公里，车程15分钟</span>
</div>
<div class="flex items-start">
<div class="flex-1">
<h4 class="font-medium">古琴台</h4>
<p class="text-sm text-gray-600 mt-1">下午14:00-16:00游览古琴台，了解音乐文化</p>
</div>
<div class="text-right whitespace-nowrap">
<span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">约2小时</span>
</div>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 mt-8 pt-4 border-t border-gray-100">
<span class="font-medium">返程</span>
<span>下午16:30后可根据航班/火车时间安排返程</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 地图部分 -->
<section id="map" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-2 text-center">旅行地图</h2>
<p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">查看所有景点的位置和路线</p>
<div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">
<div class="map-container" id="travelMap"></div>
</div>
<div class="flex justify-center">
<button id="openGaodeMap" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 flex items-center space-x-2">
<i class="fa fa-map-marker"></i>
<span>在高德地图中打开</span>
</button>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
<div>
<h3 class="text-xl font-semibold mb-4 flex items-center space-x-2">
<i class="fa fa-map-o text-red-500"></i>
<span>武汉旅行攻略</span>
</h3>
<p class="text-gray-400 mb-4">探索江城武汉的历史文化与自然风光，体验独特的荆楚魅力。</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-weibo text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-wechat text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-instagram text-xl"></i></a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">快速导航</h3>
<ul class="space-y-2">
<li><a href="#overview" class="text-gray-400 hover:text-white transition-colors">行程概览</a></li>
<li><a href="#day1" class="text-gray-400 hover:text-white transition-colors">第一天</a></li>
<li><a href="#day2" class="text-gray-400 hover:text-white transition-colors">第二天</a></li>
<li><a href="#day3" class="text-gray-400 hover:text-white transition-colors">第三天</a></li>
<li><a href="#day4" class="text-gray-400 hover:text-white transition-colors">第四天</a></li>
<li><a href="#map" class="text-gray-400 hover:text-white transition-colors">旅行地图</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">实用信息</h3>
<ul class="space-y-2 text-gray-400">
<li class="flex items-start space-x-2">
<i class="fa fa-phone mt-1"></i>
<span>旅游咨询: 027-12301</span>
</li>
<li class="flex items-start space-x-2">
<i class="fa fa-hospital-o mt-1"></i>
<span>急救: 120</span>
</li>
<li class="flex items-start space-x-2">
<i class="fa fa-police mt-1"></i>
<span>报警: 110</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 pt-8 text-center text-gray-400">
<p>© 2024 武汉旅行攻略 | 版权所有</p>
</div>
</div>
</footer>
<script>
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('py-2', 'shadow-lg');
navbar.classList.remove('py-3', 'shadow-md');
} else {
navbar.classList.add('py-3', 'shadow-md');
navbar.classList.remove('py-2', 'shadow-lg');
}
});
// 移动端菜单切换
document.getElementById('menu-toggle').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// 关闭移动端菜单
document.getElementById('mobile-menu').classList.add('hidden');
}
});
});
// 初始化地图 - 使用懒加载优化性能
function initMap() {
// 请替换为您的高德地图API密钥
const apiKey = '您的高德地图API密钥';
// 景点坐标（示例坐标，实际需替换）
const attractions = [
{ name: '黄鹤楼', position: [114.298574, 30.592855] },
{ name: '户部巷', position: [114.303144, 30.590639] },
{ name: '长江大桥', position: [114.283843, 30.590931] },
{ name: '湖北省博物馆', position: [114.319507, 30.546004] },
{ name: '东湖风景区', position: [114.330397, 30.543851] },
{ name: '武汉大学', position: [114.360426, 30.543279] },
{ name: '江汉路步行街', position: [114.276881, 30.615411] },
{ name: '汉口江滩', position: [114.270975, 30.625122] },
{ name: '知音号', position: [114.274556, 30.623277] },
{ name: '归元寺', position: [114.252793, 30.560929] },
{ name: '古琴台', position: [114.255047, 30.567161] }
];
// 尝试初始化地图
try {
const map = new AMap.Map('travelMap', {
resizeEnable: true,
zoom: 11,
center: [114.305558, 30.592771],
// 简化地图样式，提高加载速度
features: ['road', 'point']
});
// 添加标记
attractions.forEach(attraction => {
const marker = new AMap.Marker({
position: attraction.position,
title: attraction.name,
map: map
});
// 添加信息窗口
const infoWindow = new AMap.InfoWindow({
content: `<h3>${attraction.name}</h3>`,
offset: new AMap.Pixel(0, -30)
});
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
});
// 第一天路线
const day1Route = [
[114.298574, 30.592855], // 黄鹤楼
[114.303144, 30.590639], // 户部巷
[114.283843, 30.590931] // 长江大桥
];
// 绘制第一天路线
const polyline1 = new AMap.Polyline({
path: day1Route,
strokeColor: '#FF0000',
strokeWeight: 5,
strokeOpacity: 0.7,
map: map
});
// 第二天路线
const day2Route = [
[114.319507, 30.546004], // 湖北省博物馆
[114.330397, 30.543851], // 东湖风景区
[114.360426, 30.543279] // 武汉大学
];
// 绘制第二天路线
const polyline2 = new AMap.Polyline({
path: day2Route,
strokeColor: '#0080FF',
strokeWeight: 5,
strokeOpacity: 0.7,
map: map
});
// 第三天路线
const day3Route = [
[114.276881, 30.615411], // 江汉路步行街
[114.270975, 30.625122], // 汉口江滩
[114.274556, 30.623277] // 知音号
];
// 绘制第三天路线
const polyline3 = new AMap.Polyline({
path: day3Route,
strokeColor: '#00B42A',
strokeWeight: 5,
strokeOpacity: 0.7,
map: map
});
// 第四天路线
const day4Route = [
[114.252793, 30.560929], // 归元寺
[114.255047, 30.567161] // 古琴台
];
// 绘制第四天路线
const polyline4 = new AMap.Polyline({
path: day4Route,
strokeColor: '#FF7D00',
strokeWeight: 5,
strokeOpacity: 0.7,
map: map
});
// 调整地图视野
map.setFitView([polyline1, polyline2, polyline3, polyline4]);
} catch (error) {
console.error('地图初始化失败:', error);
document.getElementById('travelMap').innerHTML = '<div class="flex items-center justify-center h-full text-gray-500"><i class="fa fa-map-o text-5xl mr-4"></i><p>地图加载失败，请检查您的API密钥是否正确</p></div>';
}
}
// 打开高德地图按钮
document.getElementById('openGaodeMap').addEventListener('click', function() {
// 这里使用高德地图的URL Scheme，实际使用时需替换为正确的坐标
const gaodeUrl = 'https://uri.amap.com/marker?position=114.305558,30.592771&name=武汉旅行攻略&src=webapp&coordinate=gaode';
window.open(gaodeUrl, '_blank');
});
// 懒加载地图
function lazyLoadMap() {
const mapContainer = document.getElementById('travelMap');
const rect = mapContainer.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
// 当地图容器进入视口时初始化地图
if (rect.top <= windowHeight && rect.bottom >= 0) {
initMap();
window.removeEventListener('scroll', lazyLoadMap);
window.removeEventListener('resize', lazyLoadMap);
window.removeEventListener('orientationchange', lazyLoadMap);
}
}
// 注册事件监听
window.addEventListener('scroll', lazyLoadMap);
window.addEventListener('resize', lazyLoadMap);
window.addEventListener('orientationchange', lazyLoadMap);
// 初始检查
window.addEventListener('load', lazyLoadMap);
</script>
</body>
</html>
代码块
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('py-2', 'shadow-lg');
navbar.classList.remove('py-3', 'shadow-md');
} else {
navbar.classList.add('py-3', 'shadow-md');
navbar.classList.remove('py-2', 'shadow-lg');
}
});
// 移动端菜单切换
document.getElementById('menu-toggle').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// 关闭移动端菜单
document.getElementById('mobile-menu').classList.add('hidden');
}
});
});
// 初始化地图 - 使用懒加载优化性能
function initMap() {
// 请替换为您的高德地图API密钥
const apiKey = '您的高德地图API密钥';
// 景点坐标（示例坐标，实际需替换）
const attractions = [
{ name: '黄鹤楼', position: [114.298574, 30.592855] },
{ name: '户部巷', position: [114.303144, 30.590639] },
{ name: '长江大桥', position: [114.283843, 30.590931] },
{ name: '湖北省博物馆', position: [114.319507, 30.546004] },
{ name: '东湖风景区', position: [114.330397, 30.543851] },
{ name: '武汉大学', position: [114.360426, 30.543279] },
{ name: '江汉路步行街', position: [114.276881, 30.615411] },
{ name: '汉口江滩', position: [114.270975, 30.625122] },
{ name: '知音号', position: [114.274556, 30.623277] },
{ name: '归元寺', position: [114.252793, 30.560929] },
{ name: '古琴台', position: [114.255047, 30.567161] }
];
// 尝试初始化地图
try {
const map = new AMap.Map('travelMap', {
resizeEnable: true,
zoom: 11,
center: [114.305558, 30.592771],
// 简化地图样式，提高加载速度
features: ['road', 'point']
});
// 添加标记
attractions.forEach(attraction => {
const marker = new AMap.Marker({
position: attraction.position,
title: attraction.name,
map: map
});
// 添加信息窗口
const infoWindow = new AMap.InfoWindow({
content: `<h3>${attraction.name}</h3>`,
offset: new AMap.Pixel(0, -30)
});
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
});
// 第一天路线
const day1Route = [
[114.298574, 30.592855], // 黄鹤楼
[114.303144, 30.590639], // 户部巷
[114.283843, 30.590931] // 长江大桥
];
// 绘制第一天路线
const polyline1 = new AMap.Polyline({
path: day1Route,
strokeColor: '#FF0000',
strokeWeight: 5,
strokeOpacity: 0.7,
map: map
});
// 第二天路线
const day2Route = [
[114.319507, 30.546004], // 湖北省博物馆
[114.330397, 30.543851], // 东湖风景区
[114.360426, 30.543279] // 武汉大学
];
// 绘制第二天路线
const polyline2 = new AMap.Polyline({
path: day2Route,
strokeColor: '#0080FF',
strokeWeight: 5,
strokeOpacity: 0.7,
map: map
});
// 第三天路线
const day3Route = [
[114.276881, 30.615411], // 江汉路步行街
[114.270975, 30.625122], // 汉口江滩
[114.274556, 30.623277] // 知音号
];
// 绘制第三天路线
const polyline3 = new AMap.Polyline({
path: day3Route,
strokeColor: '#00B42A',
strokeWeight: 5,
strokeOpacity: 0.7,
map: map
});
// 第四天路线
const day4Route = [
[114.252793, 30.560929], // 归元寺
[114.255047, 30.567161] // 古琴台
];
// 绘制第四天路线
const polyline4 = new AMap.Polyline({
path: day4Route,
strokeColor: '#FF7D00',
strokeWeight: 5,
strokeOpacity: 0.7,
map: map
});
// 调整地图视野
map.setFitView([polyline1, polyline2, polyline3, polyline4]);
} catch (error) {
console.error('地图初始化失败:', error);
document.getElementById('travelMap').innerHTML = '<div class="flex items-center justify-center h-full text-gray-500"><i class="fa fa-map-o text-5xl mr-4"></i><p>地图加载失败，请检查您的API密钥是否正确</p></div>';
}
}
// 打开高德地图按钮
document.getElementById('openGaodeMap').addEventListener('click', function() {
// 这里使用高德地图的URL Scheme，实际使用时需替换为正确的坐标
const gaodeUrl = 'https://uri.amap.com/marker?position=114.305558,30.592771&name=武汉旅行攻略&src=webapp&coordinate=gaode';
window.open(gaodeUrl, '_blank');
});
// 懒加载地图
function lazyLoadMap() {
const mapContainer = document.getElementById('travelMap');
const rect = mapContainer.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
// 当地图容器进入视口时初始化地图
if (rect.top <= windowHeight && rect.bottom >= 0) {
initMap();
window.removeEventListener('scroll', lazyLoadMap);
window.removeEventListener('resize', lazyLoadMap);
window.removeEventListener('orientationchange', lazyLoadMap);
}
}
// 注册事件监听
window.addEventListener('scroll', lazyLoadMap);
window.addEventListener('resize', lazyLoadMap);
window.addEventListener('orientationchange', lazyLoadMap);
// 初始检查
window.addEventListener('load', lazyLoadMap);
代码块
.hero-bg {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/id/1036/1920/1080');
background-size: cover;
background-position: center;
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.map-container {
height: 400px;
width: 100%;
}
.itinerary-day {
scroll-margin-top: 80px;
}
技术创新点与价值分析
1. 技术创新
-
AI 驱动开发： 通过自然语言即可生成复杂的地图应用
-
标准化协议： MCP 2.0 提供了统一的地理信息服务接口
-
智能决策： 结合天气、交通等多维度信息进行智能推荐
-
无缝集成： AI IDE 与地图服务的深度融合
2. 性能对比
| 指标 | 传统开发方式 | TRAE + MCP 方式 | 提升比例 |
|---|---|---|---|
| 开发时间 | 2-3 天 | 2-3 小时 | 90%+ |
| 代码量 | 1000+行 | 100-200 行 | 80%+ |
| 功能完整度 | 基础功能 | 智能化功能 | 200%+ |
| 维护成本 | 高 | 低 | 70%+ |
| 用户体验 | 一般 | 优秀 | 150%+ |
3. 商业价值
这种开发模式的商业价值体现在：
-
降低开发门槛： 非专业开发者也能创建复杂应用
-
提高开发效率： 大幅缩短项目交付周期
-
增强创新能力： 开发者可以专注于创意而非技术细节
-
标准化服务： MCP 协议为行业建立了统一标准
总结
这次技术实践让我深刻体验了AI开发的革命性变化。通过TRAE AI IDE的自然语言编程能力，结合高德MCP 2.0地理信息服务，我在几小时内完成了功能完整的旅游攻略系统。
这重新定义了开发者价值：从代码编写者转变为创意实现者和体验设计师。AI成为得力助手，我们专注于理解需求、设计方案、优化体验。
高德MCP 2.0标志着地图服务进入AI原生时代，不仅是API升级，更是服务模式变革。最感动的是技术的温度------AI理解了我为朋友制作贴心攻略的情感需求，自动考虑天气、交通等人性化因素。
未来，AI驱动开发将普及，技术门槛降低，每个人都可能成为应用创造者。让我们拥抱AI与人类协作的时代。