Usage
이 라이브러리를 사용하기 위해서는 필수적으로 Kakao 지도 API를 불러와야 합니다.
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer"
></script>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-sdkSimple 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>
)
}맵위에 마커 클러스터 올리기
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 대환영 입니다..!!