TIL 7/18 카카오 지도 API 구현

이번 팀프로젝트의 주제는 한국 여행지를 추천받을 수 있는 웹애플리케이션이다.

 

내가 맡은 역할은 kako map API를 사용해 지도를 통한 정보 검색, 제공이다. 

 

단순히 지도를 가져오는 건 쉬웠다. 

 

하지만 클릭으로 핀을 설정하고 해당 핀의 좌표를 주소로 변경하는 것 그리고 키워드를 검색하면 해당 스코프로 지도가 이동되는 걸 구현하는 부분이 어려웠다.

 

구현 과정을 적음으로서 복기해야겠다

 

먼저 카카오 디벨로퍼에서 api키를 발급받아 index의 script에 넣어준다.

 

지도를 구현하는 컴포넌트에서 윈도우 객체의 kakao를 선언 후

 

useEffect를 이용해 지도를 렌더링 한다.

 

그리고 클릭 이벤트와 검색 이벤트 핸들러를 각각 만들어 각 기능을 구현했다.

 

검색을 했을 때 해당 value로 api에서 제공하는 keywordSearch 메서드를 이용해 데이터를 받아온다.

 

데이터는 15개까지 받아오는데 map으로 해당 데이터 좌표들을 bounds에 포함시키고

 

해당 bounds의 스코프들의 최소 범위로 지도를 다시 세팅한다.