NPM Kakao Map

kakao map api 샘플에 js코드가 있지만 react로 이주어지지 않았고 반복을 줄이고자 제작하였습니다.

사용하시면 깃허브에 ⭐ 한 번만 눌러주시면 감사하겠습니다!!
오류가 있거나 문의할게 있으면 Issues 혹은 이메일로 연락 부탁드립니다.

예제 코드 아래에서 확인 가능합니다.
https://github.com/hellojaehyeok/kakao-map-example

Start!

카카오맵 api를 사용하기 위한 준비과정입니다.

1. 카카오 디벨로퍼에 접속한 후 우측 상단 내 어플리케이션을 클릭합니다.

2. "애플리케이션 추가하기"를 눌러 프로젝트를 만들어줍니다.

3. 플랫폼 -> Web에서 kakaomap을 사용할 url을 넣습니다.

4. 요약정보 -> JavaScript 키를 index.html에 넣습니다.

현재있는 기능들은 아래와 같습니다.
앞으로 계속 추가할 예정입니다.

1. 일반지도 / 위성지도
2. 교통정보 / 지형정보 / 지적편집도
3. 현재위치 토글
4. 마커/클러스터러 토글
5. 로드뷰 토글
6. 맵 중심 좌표 정보 얻어오기

Installation

npm i @hellojh/react-kakao-map

npm설치 후 index.html에 api키를 넣습니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey= -api key- &libraries=clusterer,services"></script>

Components

|이름 | 설명 | |------|-----| |<KakaoMap />| kakao map을 실행시키는 컴포넌트입니다. |

Props

|Key | Description | Type| |------|-----|-----| |mapType|지도 타입을 정합니다.|String| |overlayMapType|지적 오버레이 타입을 정합니다.|String| |mapLevel|맵 레벨을 넣습니다.|Int| |mapCenter|맵의 중앙 좌표를 정합니다.|Object| |isMyLocation|현재 위치로 이동할지 정합니다.|Bool| |isMarker|마커 토글 유무입니다.|Bool| |makerOption|마커 옵션입니다.|Object| |clustererOption|클러스터러 옵션입니다.|Object| |roadViewRef|로드뷰 렌더 할 돔의 useRef입니다.|useRef| |roadBtnRef|로드뷰 토글 할 버튼의 useRef입니다.|useRef| |isRoadView|로드뷰 토글을 위한 변수입니다.|Bool| |idleMap|맵 중심 좌표 혹은 레벨이 바뀔 때 정보를 얻어오는 함수입니다.|Function|

Props 추가 설명

mapType

1. normal -> 일반지도   
2. satellite -> 위성지도
    

overlayMapType

1. traffic -> 교통정보
2. terrain -> 지형정보
3. use_district -> 지적편집도

mapLevel

최소 1부터 14까지 있으며 작을수록 줌 인됩니다.         

mapCenter

lat와 lng에 위도와 경도를 넣습니다.

makerOption

마커 옵션입니다.

* makerImg       
이미지가 있을경우 src에 넣으며 가로, 세로 사이즈를 지정합니다.       
* posArr        
마커 위치 배열을 넣습니다.      

makerOption 예시 코드입니다.

{
    makerImg:{
        src:null,
        width:0,
        height:0,
    },
    posArr : [
        {lat:37.499, lng:127.026},
        {lat:37.499, lng:127.027},
    ]
}

clustererOption

클러스터러 옵션입니다.

* disableClickZoom        
클릭 시 줌인 유무입니다.
* onClickCenter        
클릭 시 중점좌표를 반환합니다.
* minLevel       
클러스터러 최소 레벨입니다.

clustererOption 예시 코드입니다.

{
    disableClickZoom:true,
    onClickCenter:(e) => {console.log(e)},
    minLevel:2,
}

roadViewRef, roadBtnRef, isRoadView

로드뷰 토글 기능을 사용하기 위해서는 세개가 한 세트입니다.