用 AI 规划潮汕四日游，还能生成交互地图？我踩了 4 个坑才跑通

用 AI 规划潮汕四日游，还能生成交互地图？我踩了 4 个坑才跑通

前言

上周想带家人去汕头玩四天，本来想打开携程马蜂窝抄个行程——结果翻了几篇攻略，要么是"Day 1 到汕头，随便逛逛"的流水账，要么是排版精美的广告软文，真正的实用信息少得可怜。

我寻思：既然天天用 Claude 写代码，能不能让它帮我规划一个能吃好、玩好、路线不绕的行程？

结果不仅规划出来了，还顺手生成了一个带腾讯地图打点连线的交互式 HTML 行程单——一个文件打开即用，手机电脑都能看，点击卡片地图自动飞到对应位置。

想法很美好，但落地过程踩了 4 个坑。记录一下，希望对想做类似事情的同学有帮助。

一、需求梳理：不止是"列个清单"

一开始我跟 AI 说"帮我规划汕头四天行程"，它给出来的是这种：

Day 1: 小公园 → 老妈宫 → 海滨长廊
Day 2: 南澳岛一日游
...

信息密度太低，到了现场根本没法用。后来我给了它一个结构化的需求模板：

我需要一份汕头 4 天行程规划，要求：
1. 每天 6-8 个站点，精确到时间和预算
2. 按地理位置分组，避免走回头路
3. 包含：景点（历史文化+自然风光）、美食（具体店名）、文化体验
4. 每个站点用一句话描述亮点
5. 最后一天留购物时间
6. 预算控制人均 2500 以内

有了这个模板，输出质量立刻提升了一个档次——给 AI 的结构化 prompt 决定了输出质量，这是第一个教训。

二、踩坑 #1：坐标偏移——地图上的点全偏了

现象

AI 规划的行程很完美，我想着加点坐标信息，生成一个带地图的 HTML。

让 AI 给每个景点加上经纬度，它返回的是 GPS 坐标（WGS84 标准）。我把坐标填进腾讯地图 JSAPI，结果——所有点在图上都偏了大约 500 米。小公园的标记飘到了马路对面一座楼顶上。

原因

中国的地图服务（腾讯、高德、百度）使用的坐标系叫 GCJ-02（国测局加密坐标），WGS84 坐标在中国境内会引入约 100-700 米的随机偏移。直接拿 GPS 坐标往上怼，位置就不对。

更坑的是，不同地图平台用的坐标系还不一样：

解决

用了一个笨办法——一个景点一个景点手动校正。

先把 AI 给的坐标在腾讯地图坐标转换工具（https://lbs.qq.com/getPoint）上核对一遍，查到实际位置的 GCJ-02 坐标，再填回 HTML。

如果景点多，可以用腾讯地图的坐标转换 API 批量处理：

// 坐标转换 API（单次最多 100 个点）
// WGS84 → GCJ-02
fetch('https://apis.map.qq.com/ws/coord/v1/translate?' +
  'locations=' + wgs84Coords.join(';') +
  '&type=1&key=YOUR_KEY')

但实测这个 API 有时限频，我最后还是手动校了 26 个点。自己生成地图数据时，一定要确认坐标系兼容性。

三、踩坑 #2：腾讯地图 Key 申请——看似简单实则踩坑

现象

代码写好了，key 用占位符 YOUR_TENCENT_MAP_KEY 占着。去腾讯位置服务控制台申请 Key，填了应用名称、启用产品（选了 WebService API + JavaScript API），拿到 Key 往代码里一贴——刷新页面，地图还是加载不出来。

控制台报错：key 格式错误。

原因排查

来回检查了 3 遍，最后发现腾讯地图有两个控制台：

1. 腾讯位置服务（lbs.qq.com）—— 新平台，申请的 Key 是 OB4BZ-xxxxx-xxxxx-xxxxx-xxxxx-xxxxx 格式
2. 腾讯云地图（console.cloud.tencent.com/tianditu）—— 旧平台，Key 格式不同

我用的是腾讯位置服务的新平台，但 JSAPI 的引用 URL 和 Key 格式需要匹配。把新平台的 Key 放到旧版 API 引用方式里就会报错。

解决

正确做法（2026 年最新）：

<!-- 腾讯位置服务 JSAPI GL（新版） -->
<script src="https://map.qq.com/api/gljs?v=1&key=你的Key"></script>

注意：

• Key 要开启「JavaScript API」和「WebService API」两个产品
• 控制台有「Key 白名单」设置，开发阶段可以暂时不限制 IP，上线前再加上
• 腾讯位置服务有14天免费临时 Key，手机验证即可申请，适合快速验证

四、踩坑 #3：生成的 HTML 没法直接放腾讯云社区

现象

文章写好了，想把那个交互式行程 HTML 作为附件或者代码块嵌入文章。结果发现：

1. 腾讯云社区的文章编辑器没有"上传 HTML 文件"的功能
2. 把完整 HTML 贴到代码块里——一千多行，Monaco 编辑器直接卡死了
3. 分段贴又破坏完整性

解决

想了三个方案最终选了一个折中方案：

方案一（没采用）：把 HTML 放到 GitHub Pages/腾讯云静态托管，文章里放链接。问题：读者体验割裂。

方案二（没采用）：截图+视频演示。问题：不能交互，失去意义。

方案三（最终方案）：在文章中只展示核心代码片段（行程数据结构、地图初始化、打点逻辑），附完整原文件链接。

这里有个小技巧——腾讯云社区的附件功能可以上传文件：

草稿编辑页 → 底部工具栏 → 上传附件 → 选择生成的 HTML 文件

读者下载后在本地打开就能用，比贴完整代码好用得多。

五、踩坑 #4：Stripe 风格的 UI 在手机上布局崩了

现象

生成的 HTML 在电脑 Chrome 上非常好看——渐变 Banner、时间轴布局、左侧卡片右侧地图的左右分栏。结果手机上一打开，右侧地图被挤到下面去了，左侧卡片也窄得没法看。

原因

CSS Grid 的双栏布局没有针对小屏做好响应式。固定宽度 minmax(0, 1fr) minmax(0, 1.05fr) 在两个分栏间分配空间，手机屏幕太窄时地图直接崩了。

解决

加一个简单的媒体查询：

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;  /* 单栏 */
  }
  .map-wrap {
    position: relative !important;
    height: 480px;  /* 地图固定高度 */
  }
}

还做了几个移动端优化：

• Banner 文字大小从 52px 降到 38px
• Tab 按钮改成可以横向滚动的
• 地图从 sticky 定位改成普通流

经验：生成任何前端代码都要先考虑移动端，尤其腾讯云社区的读者多半用手机看文章。

六、最终成果

折腾完后，我得到了一个完整的汕头四日游互动行程单：

行程概览：

• Day 1：开埠老城文化线（小公园 → 骑楼群 → 镇邦美食街）
• Day 2：牛肉火锅 + 礐石山（八合里 → 跨海轮渡 → 礐石风景区）
• Day 3：南澳岛环岛（跨海大桥 → 宋井 → 青澳湾 → 渔港日落）
• Day 4：潮汕风物（陈慈黉故居 → 狮头鹅 → 汕大 → 温泉收尾）

交互功能：

• 点击 Tab 切换当天行程
• 左侧时间轴可以点击，地图自动飞到对应景点
• 地图上的标记按类型分色（景点紫、美食橙、文化青、购物粉）
• 标记间有连线，能看到一天的路线走向

技术栈：Claude (AI 规划) + 腾讯地图 JSAPI GL + 原生 HTML/CSS/JS

一个文件，打开就用，不需要装任何东西。

七、总结

这次经历让我觉得最有价值的不是行程本身，而是用 AI 生成带有交互功能的生产力工具这个思路。

几个要点：

1. 给 AI 的结构化 prompt 决定了输出质量——列个清单和给个模板，结果是两个世界
2. 坐标系是地图开发的第一个坑——不管用哪家地图服务，先搞清楚它用什么坐标系
3. Key 管理看似简单实则容易踩坑——腾讯位置服务和腾讯云是两个入口，Key 不通用
4. 生成前端代码一定要默认做移动端适配——文章读者 70%+ 是手机端
5. HTML 单文件是最方便的交付方式——打开即用，不依赖服务器

最后放一下完整的 HTML 文件链接（见附件），想拿去规划潮汕之旅的可以直接下载修改 Key 使用。如果你用其他 AI 工具规划了别的目的地，也可以套用同样的框架生成互动地图。

以上经验来自实际做项目的踩坑记录。腾讯地图 API 版本和 Key 申请流程可能更新，建议以官方文档为准。