Yoo趣儿

Yoo趣儿 › 探索分享 › 分享创造 › 发一个高德地图的 shadcn 组件封装

发一个高德地图的 shadcn 组件封装

查看 34|回复 2
作者：50vip   
最近 mapcn 火的，轻量，ai 生成，shadcn 生态，但是这个地图地图不能在国内使用，以为不合规范，所以基于高德封装了一个 amapcn。
开源出来给大家用：
  • 开源地址： https://github.com/hustcc/amapcn 小手一抖点个赞
  • 示例网站： https://map.ling.pub/

    下面是 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

    🧩 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.
  • API Key: You need to apply for an AMap API Key at the AMap Developer Platform.
  • Commercial use: Please review AMap's Terms of Service for commercial licensing details.
  • Non-commercial use: AMap provides a free tier for developers. See the developer pricing page for details.

    🤝 Contributing
    Contributions are welcome! Please feel free to submit a Pull Request.
    [ol]
  • Fork the repository
  • Create your feature branch (git checkout -b feature/amazing-feature)
  • Commit your changes (git commit -m 'Add some amazing feature')
  • Push to the branch (git push origin feature/amazing-feature)
  • Open a Pull Request
    [/ol]
    📄 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.

    高德地图, shadcn, 组件

    • 相关帖子

    50vip
    OP
      
    补充下，为啥做这个，因为产品需要，在 https://www.weavefox.cn/ 上需要加一些地图能力， 是在难以找到好用的、国内合规的库。
    qiannian   
    做的非常棒
    返回列表
    您需要登录后才可以回帖 登录 | 立即注册

    AD1

    热门主题

    热门板块

    问与答分享发现分享创造奇思妙想分享邀请码商业推广优惠信息PythonPHPJavaJavaScriptNode.jsGo语言C++HTML

    公告

    标签|小黑屋|Yoo趣儿

    GMT+8, 2026-5-14 17:35 , Processed in 0.134982 second(s), 14 queries , Gzip On, MemCached On.

    Powered by Discuz! X3.2

    The happiest thing in the world is to strive for an ideal.

    返回顶部