1、Skill 简介
这是一个帮助旅行爱好者快速获取城市美食和景点推荐的 Skill。只需输入一个城市名，它会自动全网搜索该城市的必吃美食和必去景点，并生成一份带有地理标注的交互式 HTML 旅行导引地图，适合喜欢自由行、做旅行攻略的同学使用。
2、使用场景
为什么想做它？
每次去一个新城市旅行，我都要花大量时间在各大平台搜索"XX必吃"“XX必去”，然后手动整理成攻略，再对照地图标注位置。整个过程耗时耗力，而且信息分散在不同平台，很难整合。
之前遇到了什么麻烦？
- 美食推荐和景点推荐在不同平台，需要来回切换
- 网上的攻略大多是纯文字，没有地图可视化，到了地方还是找不到
- 很多攻略是营销号写的，不够本地化
做出来之后能省掉哪些动作？
- 一句话输入城市名，自动完成"搜索→整理→标注→出图"全流程
- 生成的地图是交互式的，可以直接点击查看详情
- 所有 POI 都标注了经纬度坐标，打开就能用
3、创作过程
Step 1：确定功能架构
我想要的核心功能很简单：输入城市名 → 输出一张标注了美食和景点的交互式地图。技术选型上选择了 Leaflet.js + 高德地图瓦片，因为高德地图在国内的覆盖最好。
Step 2：数据搜索与整理
以西安作为第一个测试城市，我让 SOLO 分别搜索"西安必吃美食推荐"和"西安必去景点推荐"，整理出了 15 道美食和 15 个景点，每项都包含：
- 名称
- 推荐店铺
- 地址
- 经纬度坐标
- 文学感描述
Step 3：地图生成
基于搜索到的 POI 数据，生成单文件 HTML 页面。关键的技术点包括：
| 技术点 | 说明 |
|---|---|
| 坐标转换 | WGS-84 到 GCJ-02 的转换（高德地图使用火星坐标系） |
| 聚合标记 | Leaflet.markercluster 插件，缩小级别自动合并标记 |
| 分类筛选 | 7 种筛选模式：全部/美食/景点/历史古迹/自然风光/文化体验/网红打卡 |
| UI 设计 | 深色主题 + 城市特色配色 |
Step 4：迭代优化
在测试过程中发现并修复了几个问题：
- Marker 定位漂移：原因是 CSS 的
display:flex导致iconAnchor失效 - 坐标系偏移：高德瓦片使用 GCJ-02 坐标系，POI 数据是 WGS-84，需要转换
- 地图中心坐标颠倒：
wgs84ToGcj02返回[lng, lat]，但 Leaflet 期望[lat, lng]
Step 5：技能固化
将整个流程固化为 SKILL.md，定义了触发条件、搜索策略、技术规范和注意事项，使得任意城市都可以复用这个流程。
4、使用步骤
- 输入你想探索的城市名（如"成都"“杭州”“东京”）
- SOLO 自动触发"城市旅行地图"技能
- 全网搜索该城市的美食和景点数据
- 生成交互式 HTML 地图文件
- 在浏览器中打开即可使用
5、效果展示
目前已生成两份示例地图：
西安城市味道地图
- 15 道必吃美食：肉夹馍、泡馍、Biangbiang面、胡辣汤、凉皮、甑糕、葫芦鸡等
- 15 个必去景点：兵马俑、大雁塔、华清宫、城墙、钟鼓楼、大唐不夜城等
- 配色：深色底 + 金色强调（长安风格）
苏州城市旅行地图
- 15 道必吃美食：苏式汤面、生煎包、松鼠桂鱼、响油鳝糊、桂花糖藕、蟹壳黄等
- 15 个必去景点：拙政园、留园、虎丘、寒山寺、平江路、苏州博物馆等
- 配色：深色底 + 青绿强调（水乡风格）
地图功能
分类筛选（7 种筛选模式）- 聚合标记（缩小级别自动合并）
- 详情弹窗（点击标记查看描述、人均消费、游览时间）
- 侧边列表（点击自动定位到对应位置）
6、Skill 链接
https://zcon.lanzoul.com/iHAKj3qq9y2b
7、总结与思考
收获
- 整个过程从创意到成品大约用了 2-3 轮对话，SOLO 的搜索能力和代码生成能力让我只需要关注"要什么"而不是"怎么做"
- 最大的惊喜是搜索质量——搜出来的美食推荐非常本地化，连"洒金桥才是本地人真正去的美食街"这种信息都能找到
最满意的地方
- 地图的视觉设计：深色主题 + 金色/青绿色强调，不同城市可以适配不同配色
- 文案质量：每道美食和景点的描述都有文学感，不是干巴巴的攻略
后续优化方向
- 支持国外城市（目前搜索策略主要针对中文信息源）
- 加入路线规划功能（根据用户停留天数自动推荐路线）
- 支持导出为图片/PDF，方便分享到社交媒体
希望得到的建议
- 大家觉得地图上还缺什么信息？
- 有没有想优先支持的城市？
- 文案风格是更喜欢文学感还是更实用的风格？
用味觉和脚步丈量每座城市。 
