yabby1997 / react-kakao-maps Goto Github PK

View Code? Open in Web Editor NEW

This project forked from musma/react-kakao-maps

0.0 1.0 0.0 83 KB

카카오 지도 (Daum 지도 Web API) 리액트 컴포넌트

License: MIT License

JavaScript 1.38% TypeScript 98.62%

react-kakao-maps's Introduction

react-kakao-maps

카카오 지도 (Daum 지도 Web API) 리액트 컴포넌트

목적

react-google-maps도 있고, react-naver-maps도 있는데, react-kakao-maps는 없어서...

그래서 무스마 기술연구소에서 공유해드립니다.

설치 방법

애플리케이션이 시작되기 전에 Daum 지도 API를 먼저 불러와야 합니다.

다음 지도 Web API 사용법

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

그리고 package.json에 dependencies로 추가합니다.

# npm
$ npm Musma/react-kakao-maps#0.0.1 --save

# yarn
$ yarn add Musma/react-kakao-maps#0.0.1

타입스크립트

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

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

{
  ...,
  "compilerOptions": {
    ...,
    "types": [
      ...,
      "daum.maps.d.ts"
    ]
  }
}

사용 방법

react-google-maps 컴포넌트 사용 방법과 비슷합니다.

import { Map, Marker, MarkerClusterer, Polyline } from 'react-kakao-maps'

...

render() {
  return (
    <React.Fragment>
      ...

      {/* 모든 지도 요소 컴포넌트들은 반드시 DOM 구조상 `Map`의 자손이어야 합니다. */}
      <Map options={{ ... }}>
        ...

        {/* 그냥 마커는 이렇게 */}
        <Marker options={{ ... }} />

        {/* 마커 클러스터링 기능 사용하려면 이렇게 */}
        <MarkerClusterer options={{ ... }}>
          <Marker options={{ ... }} />
        </MarkerClusterer>
        
        {/* 나머지도 동일합니다. */}
        <Polyline options={{ ... }} />
      </Map>
    </React.Fragment>
  )
}