用 AI 做一份"会飞行"的旅游攻略

一句话需求 → 真实地图坐标 → 单文件交互式 HTML。把 AI 当成会调 API、会写前端的产品工程师，而不是只会吐文字的搜索框。

先看痛点：传统旅游攻略到底卡在哪

你大概也干过这事——出发前在小红书/马蜂窝/大众点评之间反复横跳，把碎片信息复制进备忘录，最后还是得对着一张静态地图手动连点。

传统图文攻略：

• 图文和地图是分离的，看到名字还要再去搜位置
• 行程顺序全靠脑补，无法判断动线是否合理
• 改一版要重排一遍，复制粘贴到崩溃
• 分享给朋友只能发一堆截图

单文件 HTML 攻略：

• 时间轴卡片 + 地图打点连线，所见即动线
• 点卡片地图就"飞"过去，点图钉卡片就高亮
• 换城市换主题，改 prompt 重新生成即可
• 一个 .html 文件微信直接发，对方双击就看

关键认知： HTML 不是"网页"，而是一种可交互的交付格式。当 AI 能写 HTML、能调地图 API、能把真实坐标塞进页面里——它产出的就不再是"文字攻略"，而是一件能用的软件作品。

完整流程：一句话到一个文件

下面是这次做《成都三日行》的真实链路，全程 AI 编排：

1. 加载地图技能：调用"腾讯地图助手"技能，获得 JSAPI 用法文档、POI 搜索脚本、临时 Key 申请流程。
2. 申请地图 Key：AI 引导你用手机号 + 短信验证码，一键申请腾讯位置服务临时体验 Key（14 天有效），自动写入本地配置。
3. 批量搜真实坐标：AI 用脚本调用 POI 搜索接口，把"武侯祠 / 锦里 / 熊猫基地 / 青城山…"等十几个地名一次性换成真实经纬度——不是估算，是地图库里能查到的精确点位。
4. 规划行程结构：AI 按你给的主题（历史文化 / 美食 / 自然 / 夜生活）排定 3 天动线，分景点 / 美食 / 文化 / 购物四类配色。
5. 生成单文件 HTML：CSS / JS 全部内联，地图 Key 内联，坐标内联。一个 .html 双击即开，零依赖。
6. 实现交互：Tab 切换 DAY1/2/3 → 重绘打点 + 连线 + 自适应视野；点卡片 → 地图 easeTo 飞行定位 + 弹信息窗；点图钉 → 卡片高亮联动。
7. 语法自检：AI 抽出内联 JS 跑 node --check，确保没有低级语法错误才交付。

最容易被忽略的一步是"真实坐标"。 很多 AI 攻略用的是模型记忆里的近似坐标，打点会偏到河里。调用地图 API 搜 POI，是让攻略"可信"而不是"看着玩"的分水岭。

可复用的 Prompt 模板

把下面这段改成你的城市和偏好，直接发给 AI 即可。模板的精髓不在辞藻，而在把需求拆成可验收的条款——

帮我做一个【城市名】N 日旅游行程规划单文件 HTML，景点和行程由你自行规划，兼顾【主题1】、【主题2】、【主题3】、【主题4】。视觉参考 Stripe 风格（清爽、柔光渐变）。页面要求：- 顶部 banner 居中放大标题，右侧用徽章展示天数 / POI 数 / 总预算- 下方左侧为每天的时间轴卡片列表（POI 分景点/美食/文化/购物四类，  用不同配色，按时间顺序排列）- 右侧为地图，按当日顺序打点连线- 顶部 Tab 切换各天，点击左侧卡片地图飞到对应位置技术要求：- 调用腾讯地图 JSAPI GL，坐标用真实 POI 搜索结果，不要估算- 所有 CSS/JS 内联，输出单一 HTML 文件可直接打开- 地图 Key 用我申请的临时 Key（如未申请请引导我完成）

几个让产出质量翻倍的小习惯：

• 指定视觉参考："Stripe 风格""苹果官网风""Linear 风"——比"好看""高级"具体 100 倍。
• 指定交互动词："点击卡片地图飞到对应位置"——"飞到"会让 AI 用 easeTo 而不是 setCenter，体验天差地别。
• 指定交付形态："单文件 HTML 可直接打开"——AI 会把所有依赖内联，避免给你一堆相对路径的坑。

示例代码：最小可学习版本

下面是这次攻略里最核心的三段代码，剥掉装饰只留骨架，方便你照着改自己的版本。

① 加载地图 + 创建图钉

// 1. 引入腾讯地图 JSAPI GL（Key 换成你自己的）<script charset="utf-8"  src="https://map.qq.com/api/gljs?v=1.exp&key=你的KEY"></script>const map = newTMap.Map('map', {center: newTMap.LatLng(30.6598, 104.0633),  // 成都中心zoom: 12});// 2. 给每个 POI 打一个带序号的彩色图钉const marker = newTMap.MultiMarker({map: map,styles: {spot: newTMap.MarkerStyle({color: '#635bff',  // Stripe 紫size: 28,anchor: { x: 14, y: 28 }    })  },geometries: pois.map((p, i) => ({id: i,styleId: 'spot',position: newTMap.LatLng(p.lat, p.lng),properties: { title: p.title }  }))});

② 用折线把当日动线连起来

// 当日所有 POI 按时间顺序连成一条紫色折线const polyline = newTMap.MultiPolyline({map: map,styles: {line: newTMap.PolylineStyle({color: '#635bff',width: 5,borderWidth: 2,borderColor: '#ffffff',lineCap: 'round'    })  },geometries: [{styleId: 'line',paths: pois.map(p =>newTMap.LatLng(p.lat, p.lng))  }]});

③ 点卡片 → 地图"飞"过去 + 自适应视野

// 点击左侧卡片，地图平滑飞到该 POIcard.addEventListener('click', () => {  map.easeTo({center: newTMap.LatLng(poi.lat, poi.lng),zoom: 15,duration: 1200// 1.2 秒丝滑飞行  });  infoWindow.open();  infoWindow.setPosition(newTMap.LatLng(poi.lat, poi.lng));});// 切换 Tab 后，地图自动框住当日所有点const bounds = newTMap.LatLngBounds();dayPois.forEach(p => bounds.extend(newTMap.LatLng(p.lat, p.lng)));map.fitBounds(bounds, { padding: 80 });

这三段加起来不到 60 行，但已经能跑通"打点 → 连线 → 飞行 → 自适应"的完整体验。把它当脚手架，往里塞你的 POI 数组就能出自己的攻略。

进阶技巧：从"能跑"到"惊艳"

视觉：用渐变光晕代替纯色背景

Stripe 风的精髓是柔光。把背景写成多层 radial-gradient 叠加，比纯白底高级一截：

background:radial-gradient(60%80% at 20%10%, rgba(99,91,255,.18), transparent 60%),radial-gradient(50%70% at 85%20%, rgba(255,107,181,.16), transparent 60%),linear-gradient(180deg,#fff0%, #f6f7ff100%);

分类配色：让信息一眼可读

四类 POI 用四套色，卡片左边一条色带 + 图钉同色：

• 🏛️ 景点 → 蓝 #3b82f6
• 🍜 美食 → 橙 #f97316
• 📜 文化 → 紫 #8b5cf6
• 🛍️ 购物 → 绿 #10b981

双向联动：点卡片飞地图，点图钉亮卡片

单向联动只是"能用"，双向联动才"惊艳"。给图钉绑 click 事件，回调里找到对应卡片 DOM 加 .active 类并 scrollIntoView，体验立刻不一样。

坐标一定要"真"

让 AI 调地图 API 搜 POI 拿真实经纬度，而不是用模型记忆里的近似值——后者打点常常飘到江里、商场屋顶上。

交付前自检

让 AI 把内联 JS 抽出来跑一遍 node --check，能挡掉 90% 的低级语法错误。

写在最后

这篇手记想传递的核心其实只有一句：别把 AI 当搜索框，把它当会调 API、会写前端的协作者。

当 AI 能调用真实地图接口、能编排真实坐标、能把交互逻辑落进一个可双击打开的文件里——它产出的就不再是"攻略文字"，而是一件能用的软件作品。旅游攻略只是个入口，同样的套路能做校园地图、婚礼动线、看房路线、citywalk 指南……任何"地点 + 顺序 + 信息"的场景都适用。

给你的作业： 挑一个你最近想去或去过的城市，用文中的 Prompt 模板让 AI 做一份自己的 HTML 攻略。做出来发我看看 🥥

模板 / 示例 / 坐标全部开源可学 · 地图 Key 请自行申请

转载注明作者「AI能力栈」