简体中文 | English

让中国地图开发合规且更简单。免费开源、开箱即用、可自定义的 React 地图组件。

零配置，一条命令即可开始。基于 高德地图（AMap），使用 Tailwind 样式体系，与 shadcn/ui 无缝协作。

🧩 配合 shadcn/ui 使用

使用 shadcn/ui CLI 将 amapcn 组件添加到你的项目中：

npx shadcn@latest add https://map.ling.pub/r/amap.json

import { Map, MapMarker } from "@/components/ui/map";

📦 使用 npm

直接安装 npm 包：

npm install amapcn

import { Map, MapMarker } from "amapcn";

🤖 配合 Claude Code 使用

将 amapcn skill 添加到 Claude Code，实现 AI 地图开发：

claude skill add https://github.com/hustcc/ai-map/tree/main/amapcn-skill

✨ 特性

• 🎨 主题感知 —— 自动适配明暗主题
• 🎯 零配置 —— 默认即可工作
• 📦 兼容 shadcn/ui —— 采用一致的组件与样式模式
• 🗺️ 基于高德地图 —— 完整接入高德地图能力
• 🧩 可组合 —— 用声明式组件构建复杂地图界面
• 📍 标记与弹窗 —— 丰富的 Marker、Popup、Tooltip 与 Label 支持
• 🛤️ 路线能力 —— 轻松绘制路线与轨迹
• 🎮 地图控件 —— 支持缩放、指北针、定位与全屏控件

📜 高德地图服务条款

本项目使用 高德地图（AMap） JS API。

• API Key：你需要在 高德开放平台 申请 API Key。
• 商业使用：请阅读 高德服务条款 了解商业授权细节。
• 非商业使用：高德提供开发者免费额度，详情见 开发者定价页面。

🤝 参与贡献

欢迎贡献！欢迎随时提交 Pull Request。

1. Fork 本仓库
2. 创建你的功能分支（git checkout -b feature/amazing-feature）
3. 提交你的修改（git commit -m 'Add some amazing feature'）
4. 推送到分支（git push origin feature/amazing-feature）
5. 发起 Pull Request

📄 许可证

MIT License - 详见 LICENSE。

项目灵感来自 mapcn 的优秀设计、组件模式与文档结构。amapcn 在其思路基础上针对高德地图与中国地图生态进行了适配。