Usage

이 라이브러리를 사용하기 위해서는 필수적으로 Kakao 지도 API를 불러와야 합니다.

Kakao 지도 Javscript API

1<script
2  type="text/javascript"
3  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer"
4></script>

TypeScript

타입스크립트 사용자를 위해 kakao.maps.d.ts 패키지를 제공합니다.

tsconfig.json의 compilerOptions.types 속성에 kakao.maps.d.ts 패키지를 추가하시면 됩니다.

1{
2  ...,
3  "compilerOptions": {
4    ...,
5    "types": [
6      ...,
7      "kakao.maps.d.ts"
8    ]
9  }
10}

Install

1npm install react-kakao-maps-sdk
2# or
3yarn add react-kakao-maps-sdk

Simple Usage

맵위에 마커와 인포윈도우 올리기

1function(){
2  return (
3    <Map
4      center={{ lat: 33.5563, lng: 126.79581 }}
5      style={{ width: "100%", height: "360px" }}
6    >
7      <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}>
8        <div style={{color:"#000"}}>Hello World!</div>
9      </MapMarker>
10    </Map>
11  )
12}

맵위에 커스텀오버레이 올리기

1function(){
2  return (
3    <Map
4      center={{ lat: 33.5563, lng: 126.79581 }}
5      style={{ width: "100%", height: "360px" }}
6    >
7      <CustomOverlayMap position={{ lat: 33.55635, lng: 126.795841 }}>
8        <div
9          style={{padding:"42px", backgroundColor:"#fff", color:"#000"}}
10        >
11          Custom Overlay!
12        </div>
13      </CustomOverlayMap>
14    </Map>
15  )
16}

맵위에 마커 클러스터 올리기

1function(){
2  return (
3    <Map
4      center={{ lat: 36.2683, lng: 127.6358 }}
5      style={{ width: "100%", height: "360px" }}
6      level={14}
7    >
8      <MarkerClusterer
9        averageCenter={true}
10        minLevel={10}
11      >
12        {clusterPositionsData.positions.map((pos) => (
13          <MapMarker
14            key={`${pos.lat}-${pos.lng}`}
15            position={pos}
16          />
17        ))}
18      </MarkerClusterer>
19    </Map>
20  )
21}

Documentation

• Tutorial
• Sample
• API

Working list

• Map
  • Marker
  • InfoWindow
  • CustomOverlay
  • MarkerClusterer
  • AbstractOverlay
  • Shape
    • Circle, Polyline, Polygon, Rectangle, Ellipse
  • DrawingBox
• Roadview
  • Marker
  • InfoWindow
  • CustomOverlay
• StaticMap

Contribute

ISSUE와 PR 대환영 입니다..!!