最近在使用 [WeaveFox](https://www.weavefox.cn/) Vibe Coding 一些应用和工具，效果还不错，能生成数据库，登录系统，还能有 LLM，OSS 免费使用。可以到我的主页看我的作品 <https://www.weavefox.cn/@hustcc>。

最近准备 Outing 想做一个路线地图，发现 AI 总是会生成 SVG 的示意地图糊弄我。

![map1.png](https://developer.qcloudimg.com/http-save/yehe-1413276/1c06f1e32458b24c1c15c93f929d6eca.png)

调研之后发现大概率是应为国内地图只能高德、百度，但是他们又是需要 Key 的，所以 AI 生成大概率都是无法渲染出来，AI 只好退化之后用 SVG 兜底。

最近WeaveFox 有加入了自定义 Skill 的能力，所以想是否可以自己封装一个地图组件 + Skill，让 AI 能准确识别和生成地图应用。

![skill.png](https://developer.qcloudimg.com/http-save/yehe-1413276/55f84588e032b4d6bf064d6ef197d13e.png)

说干就干，初步打算就是开源项目的方式，然后上传 Skill 到 WeaveFox 还可以分享给其他人。

## 造一个高德地图组件 +  Skill = amapcn

最近社区有一个比较火的地图项目：mapcn，不过因为是基于  MapLibre GL 封装，第一个大问题就是国内地图合规上就是不过关的，所以一定会需要使用高德地图、腾讯地图之类的。这个前提下，做了基本的技术设计和约束：

1.  基于高德地图，感觉高德地图相对活跃，AI 时代下也有一些跟进。
2.  封装支持 shadcn 方式的分发形式，且支持单独的 React 组件包使用。
3.  需要提供 Skill，给 AI 作为项目参考。
4.  基于 tailwind CSS 的形式，和他能进行无缝结合。
5.  参考 mapcn 的组织方式，fork 他的官网样式，并加入致谢链接。

所以最终就是：满足国内地图合规的，支持 NPM 包、shadcn 分发、AI Skill 三种使用方式的，**<u>高德地图的 React 轻量级组件封装</u>**。

有 AI 加持，造轮子已经很简单了，过程就不赘述了，大家可以去看代码， 有需求的可以用起来，觉得好用给个 Star！贴几张图先看看组件效果。

![map2.png](https://developer.qcloudimg.com/http-save/yehe-1413276/49a1bcd6fe5b6f371f6a21641e27576f.png)

![map3.png](https://developer.qcloudimg.com/http-save/yehe-1413276/b79a51024bdd9fdb3c4bad8bc1f3c6d1.png)

支持了：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 内容复制进行，等待信息安全审核通过之后，就可以使用了，一般几分钟就通过了（前提是内容合规合法，不然会被拒绝）。

![skill-map.png](https://developer.qcloudimg.com/http-save/yehe-1413276/f0c4d714c32ce9aab3f4768cdbcff7a7.png)

通过之后，就会在首页中显示出来。地址在这里：<https://www.weavefox.cn/extensions/skills/yfLARjZhH>，全网所有人都可以使用。

## 试着做一个地图应用

基于已经上传的 Skill + WeaveFox 内置的地图服务，就可以尝试做一个应用了，简单示意一下 [航线迹 | WeaveFox](https://amapcn.app.weavefox.cn/)。

![map4.png](https://developer.qcloudimg.com/http-save/yehe-1413276/ea2baf5ab6c36321ac0578e5bf6b3789.png)

如果需要更复杂，还可以结合使用以下服务：

*   Appwrite 服务：数据存储，用户鉴权
*   地图服务：获取地点的经纬度
*   amapcn 组件：内置高德 KEY，绘制地图

## 最后

WeaveFox 是一个国内的创意应用生成工具，并且包含有很多的全栈应用需要的服务，也可以一键发布上线，全网可以访问，甚至还可以自定义域名，并且这些都是免费的。

我这个应用应该算是比较复杂的全栈应用，并且还造了一个开源轮子，整体大概 3 天吧，不过大部分时间都在 amapcn 上，毕竟是需要开源的代码，做的比较细致一些。

欢迎帮忙分享：<https://github.com/hustcc/amapcn>


最近在使用 WeaveFox Vibe Coding 一些应用和工具，效果还不错，能生成数据库，登录系统，还能有 LLM，OSS 免费使用。可以到我的主页看我的作品 https://www.weavefox.cn/@hustcc。

为了 Vibe Coding 地图更方便，我给 WeaveFox 造了一个轮子

前端

开发工具

开源amapcn高德地图React组件，支持NPM包、shadcn分发及AISkill，满足国内地图合规需求。提供Map、Marker、Route等丰富组件，覆盖多数地图场景。结合WeaveFox平台Skill功能，可快速生成地图应用，无缝集成数据存储、用户鉴权等服务，免费发布上线。

数据存储

数据库

2026采购季 | AI焕新·智启新局

tencentdb-catalog

对象存储COS新用户低至1元！


热销域名限时优惠，新客首年免费！


domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

为了 Vibe Coding 地图更方便，我给 WeaveFox 造了一个轮子-腾讯云开发者社区-腾讯云

为了 Vibe Coding 地图更方便，我给 WeaveFox 造了一个轮子

为了 Vibe Coding 地图更方便，我给 WeaveFox 造了一个轮子

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐