[分享创造] 发一个高德地图的 shadcn 组件封装

最近 mapcn 火的,轻量,ai 生成,shadcn 生态,但是这个地图地图不能在国内使用,以为不合规范,所以基于高德封装了一个 amapcn 。 开源出来给大家用: 开源地址: https://github.com/hustcc/amapcn 小手一抖点个赞 示例网站: https://map....
[分享创造] 发一个高德地图的 shadcn 组件封装
[分享创造] 发一个高德地图的 shadcn 组件封装

最近 mapcn 火的,轻量,ai 生成,shadcn 生态,但是这个地图地图不能在国内使用,以为不合规范,所以基于高德封装了一个 amapcn

开源出来给大家用:

下面是 readme 介绍。


🗺️ amapcn for China! 🇨🇳

Beautiful maps for China, made simple. Free & open-source, ready-to-use, customizable map components for React.

Zero config. One command setup. Built on AMap (高德地图), styled with Tailwind, works seamlessly with shadcn/ui.

Get Started · Installation · Components

amapcn

🧩 Using with shadcn/ui

Add amapcn components to your project using the shadcn/ui CLI:

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

✨ Features

  • 🎨 Theme-aware — Automatically adapts to light/dark mode
  • 🎯 Zero config — Works out of the box with sensible defaults
  • 📦 shadcn/ui compatible — Uses the same patterns and styling conventions
  • 🗺️ AMap powered — Full access to AMap's powerful mapping capabilities for China
  • 🧩 Composable — Build complex map UIs with simple, declarative components
  • 📍 Markers & Popups — Rich marker system with popups, tooltips, and labels
  • 🛤️ Routes — Draw routes and paths on your maps
  • 🎮 Controls — Zoom, compass, locate, and fullscreen controls

📜 AMap Terms of Service

This project uses AMap (高德地图) JS API.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

MIT License - see the LICENSE file for details.

Inspired by mapcn's excellent design, component patterns, and documentation structure. amapcn follows a similar approach adapted for AMap and the China mapping ecosystem.

来源: v2ex查看原文