Usage
์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ํ์์ ์ผ๋ก Kakao ์ง๋ API๋ฅผ ๋ถ๋ฌ์์ผ ํฉ๋๋ค.
Kakao ์ง๋ Javscript API
HTML Script Tag๋ฅผ ์ด์ฉํ์ฌ 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 <>
...
<>
}
TypeScript
ํ์
์คํฌ๋ฆฝํธ ์ฌ์ฉ์๋ฅผ ์ํด kakao.maps.d.ts ํจํค์ง๋ฅผ ์ ๊ณตํฉ๋๋ค.
tsconfig.json์ compilerOptions.types ์์ฑ์ kakao.maps.d.ts ํจํค์ง๋ฅผ ์ถ๊ฐํ์๋ฉด ๋ฉ๋๋ค.
{
...,
"compilerOptions": {
...,
"types": [
...,
"kakao.maps.d.ts"
]
}
}
Install
npm install react-kakao-maps-sdk
# or
yarn add react-kakao-maps-sdk
# or
pnpm add react-kakao-maps-sdk
Simple Usage
๋งต์์ ๋ง์ปค์ ์ธํฌ์๋์ฐ ์ฌ๋ฆฌ๊ธฐ
function(){
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>
)
}
๋งต์์ ๋ง์ปค ํด๋ฌ์คํฐ ์ฌ๋ฆฌ๊ธฐ
โป ์ฐธ๊ณ : ํด๋น ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ์ฌ์ฉ์๋ ๋ฐ๋์ clusterer library๋ฅผ ๋ถ๋ฌ์์ผ ํฉ๋๋ค.
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>
)
}
Documentation
Working list
- Map
- Marker
- InfoWindow
- CustomOverlay
- MarkerClusterer
- AbstractOverlay
- Shape
- Circle, Polyline, Polygon, Rectangle, Ellipse
- DrawingBox
- Roadview
- Marker
- InfoWindow
- CustomOverlay
- StaticMap
Contribute
ISSUE์ PR ๋ํ์ ์
๋๋ค..!!
