最近在使用 WeaveFox Vibe Coding 一些应用和工具，效果还不错，能生成数据库，登录系统，还能有 LLM，OSS 免费使用。可以到我的主页看我的作品 https://www.weavefox.cn/@hustcc。
最近准备 Outing 想做一个路线地图，发现 AI 总是会生成 SVG 的示意地图糊弄我。
调研之后发现大概率是应为国内地图只能高德、百度，但是他们又是需要 Key 的，所以 AI 生成大概率都是无法渲染出来，AI 只好退化之后用 SVG 兜底。
最近WeaveFox 有加入了自定义 Skill 的能力，所以想是否可以自己封装一个地图组件 + Skill，让 AI 能准确识别和生成地图应用。
说干就干，初步打算就是开源项目的方式，然后上传 Skill 到 WeaveFox 还可以分享给其他人。
造一个高德地图组件 + Skill = amapcn
最近社区有一个比较火的地图项目：mapcn，不过因为是基于 MapLibre GL 封装，第一个大问题就是国内地图合规上就是不过关的，所以一定会需要使用高德地图、腾讯地图之类的。这个前提下，做了基本的技术设计和约束：
- 基于高德地图，感觉高德地图相对活跃，AI 时代下也有一些跟进。
- 封装支持 shadcn 方式的分发形式，且支持单独的 React 组件包使用。
- 需要提供 Skill，给 AI 作为项目参考。
- 基于 tailwind CSS 的形式，和他能进行无缝结合。
- 参考 mapcn 的组织方式，fork 他的官网样式，并加入致谢链接。
所以最终就是：满足国内地图合规的，支持 NPM 包、shadcn 分发、AI Skill 三种使用方式的，高德地图的 React 轻量级组件封装。
有 AI 加持，造轮子已经很简单了，过程就不赘述了，大家可以去看代码， 有需求的可以用起来，觉得好用给个 Star！贴几张图先看看组件效果。
支持了：Map、MapMarker、MarkerContent、MarkerPopup、MarkerTooltip、MarkerLabel、MapPopup、MapControls、MapRoute、MapClusterLayer、MapPolygon、MapCircle、MapHeatmap、MapTrafficLayer、MapSatelliteLayer 这些组件和能力，基本满足了绝大多数的地图场景，当然也欢迎提交意见。 开源地址：https://github.com/hustcc/amapcn
增加地图 Skill
在 WeaveFox 平台上去新建 Skill，然后将开源的 amapcn 的技能 Skill 内容复制进行，等待信息安全审核通过之后，就可以使用了，一般几分钟就通过了（前提是内容合规合法，不然会被拒绝）。
通过之后，就会在首页中显示出来。地址在这里：https://www.weavefox.cn/extensions/skills/yfLARjZhH，全网所有人都可以使用。
试着做一个地图应用
基于已经上传的 Skill + WeaveFox 内置的地图服务，就可以尝试做一个应用了，简单示意一下 航线迹 | WeaveFox。
如果需要更复杂，还可以结合使用以下服务：
- Appwrite 服务：数据存储，用户鉴权
- 地图服务：获取地点的经纬度
- amapcn 组件：内置高德 KEY，绘制地图
最后
WeaveFox 是一个国内的创意应用生成工具，并且包含有很多的全栈应用需要的服务，也可以一键发布上线，全网可以访问，甚至还可以自定义域名，并且这些都是免费的。
我这个应用应该算是比较复杂的全栈应用，并且还造了一个开源轮子，整体大概 3 天吧，不过大部分时间都在 amapcn 上，毕竟是需要开源的代码，做的比较细致一些。
