이 라이브러리를 사용하기 위해서는 필수적으로 Kakao 지도 API를 불러와야 합니다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer" ></script>const Component = () => { const [ loading, error ] = useKakaoLoader({ appkey: "...", // 발급 받은 APPKEY ...options // 추가 옵션 }) return <> ... <> }타입스크립트 사용자를 위해 kakao.maps.d.ts 패키지를 제공합니다.
tsconfig.json의 compilerOptions.types 속성에 kakao.maps.d.ts 패키지를 추가하시면 됩니다.
{ ..., "compilerOptions": { ..., "types": [ ..., "kakao.maps.d.ts" ] } }npm install react-kakao-maps-sdk # or yarn add react-kakao-maps-sdk # or pnpm add react-kakao-maps-sdkfunction(){ return ( <Map center={{ lat: 33.5563, lng: 126.79581 }} style={{ width: "100%", height: "360px" }} > <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}> <div style={{color:"#000"}}>Hello World!</div> </MapMarker> </Map> ) }function(){ return ( <Map center={{ lat: 33.5563, lng: 126.79581 }} style={{ width: "100%", height: "360px" }} > <CustomOverlayMap position={{ lat: 33.55635, lng: 126.795841 }}> <div style={{padding:"42px", backgroundColor:"#fff", color:"#000"}} > Custom Overlay! </div> </CustomOverlayMap> </Map> ) }※ 참고: 해당 기능을 사용하기 위해서는 사용자는 반드시
clustererlibrary를 불러와야 합니다.
function(){ return ( <Map center={{ lat: 36.2683, lng: 127.6358 }} style={{ width: "100%", height: "360px" }} level={14} > <MarkerClusterer averageCenter={true} minLevel={10} > {clusterPositionsData.positions.map((pos) => ( <MapMarker key={`${pos.lat}-${pos.lng}`} position={pos} /> ))} </MarkerClusterer> </Map> ) }- Map
- Marker
- InfoWindow
- CustomOverlay
- MarkerClusterer
- AbstractOverlay
- Shape
- Circle, Polyline, Polygon, Rectangle, Ellipse
- DrawingBox
- Roadview
- Marker
- InfoWindow
- CustomOverlay
- StaticMap
ISSUE와 PR 대환영 입니다..!!