react-kakao-maps-sdk
v1.2.0TypeScript
React components for using kakao map api
0/weekUpdated 8 months agoMITUnpacked: 179.7 KB
Published by JaeSeoKim
npm install react-kakao-maps-sdk
Usage
이 라이브러리를 사용하기 위해서는 필수적으로 Kakao 지도 API를 불러와야 합니다.
$3
``html`
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer"
>
$3
`tsx
const Component = () => {
const [ loading, error ] = useKakaoLoader({
appkey: "...", // 발급 받은 APPKEY
...options // 추가 옵션
})
return <>
...
<>
}
`
TypeScript
타입스크립트 사용자를 위해 kakao.maps.d.ts 패키지를 제공합니다.
tsconfig.json의 compilerOptions.types 속성에 kakao.maps.d.ts 패키지를 추가하시면 됩니다.
`js`
{
...,
"compilerOptions": {
...,
"types": [
...,
"kakao.maps.d.ts"
]
}
}
Install
`bash`
npm install react-kakao-maps-sdkor
yarn add react-kakao-maps-sdkor
pnpm add react-kakao-maps-sdk
Simple Usage
$3
`jsx live`
function(){
return (
style={{ width: "100%", height: "360px" }}
>
Hello World!
)
}
$3
`jsx live
function(){
return (
style={{ width: "100%", height: "360px" }}
>
>
Custom Overlay!
)
}
`
$3
> ※ 참고: 해당 기능을 사용하기 위해서는 사용자는 반드시
library를 불러와야 합니다.`jsx live
function(){
return (
style={{ width: "100%", height: "360px" }}
level={14}
>
minLevel={10}
>
{clusterPositionsData.positions.map((pos) => (
${pos.lat}-${pos.lng}}
position={pos}
/>
))}
)
}
``Documentation
Working list
- Map
- Marker
- InfoWindow
- CustomOverlay
- MarkerClusterer
- AbstractOverlay
- Shape
- Circle, Polyline, Polygon, Rectangle, Ellipse
- DrawingBox
- Roadview
- Marker
- InfoWindow
- CustomOverlay
- StaticMap
Contribute
ISSUE와 PR 대환영 입니다..!!