移动端旅行攻略地图

问题

文字版旅游攻略在手机上查看时，景点顺序、路线分支、交通节点和停留时间很难形成空间感；直接贴坐标或静态图片又缺少路线切换、筛选和详情查看。这个技能解决的是“把已有攻略转成移动端可交互地图”的问题，而不是生成攻略内容。

工作方式

• 先接收用户提供的目的地、日程、景点列表、路线安排，以及高德地图 API Key。
• 通过高德 POI 搜索获取景点名称、地址、GCJ-02 坐标，并整理为可渲染数据。
• 生成一张覆盖范围较大的静态地图图片，以 Base64 内嵌到最终 HTML 中，使用 CSS scale 实现缩放，避免拖动出现空白。
• 在地图上叠加 POI 标记、路线切换、分类筛选、景点详情、底部面板和缩放控件。
• 最终输出为单个 HTML 文件，所有样式和脚本内联，适配 375px - 768px 移动端浏览器、触摸手势和安全区域。

适用边界

该技能不负责撰写攻略，也不依赖最终在线 API；地图数据在生成阶段获取，完成后 API Key 不应写入 HTML。若景点名称缺失、路线安排不完整或高德服务不可用，需要先补齐文本攻略或手动提供坐标。