Installation

How to install and set up amapcn in your project.

Prerequisites

A project with Tailwind CSS set up. For the shadcn/ui method, shadcn/ui is also required.

npm

Install the package:

npm install amapcn

shadcn/ui

Add the map component to your project (source code, fully customizable):

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

This will install @amap/amap-jsapi-loader and add the map component to your project.

Usage

Import and use the map component:

import { Map, MapControls } from "amapcn";
import { Card } from "@/components/ui/card";

export function MyMap() {
  return (
    <Card className="h-[300px] p-0 overflow-hidden">
      <Map
        amapKey="YOUR_AMAP_KEY"
        center={[116.397428, 39.90923]}
        zoom={11}
      >
        <MapControls />
      </Map>
    </Card>
  );
}
Note: AMap requires a valid API key. Pass it via the amapKey prop. Get your key at lbs.amap.com. Map styles automatically switch between light and dark themes.
PreviousIntroductionNextAPI Reference