리액트을 사용해서 카카오 지도 활용해 보기

리액트을 사용해 카카오 지도 활용해 보기

마커는 지도에서 특정 위치를 나타내는 표기물로, 사용자가 지도에서 특정 위치를 손쉽게 볼 수 있고, 손쉽게 클릭할 수 있게 하는 도구입니다. 보통 마커는 선택 이벤트로, 해당 장소에 대한 정보를 제공해 줍니다. 이 포스팅은 카카오 Map API 공식 가이드를 참고하여 제작하였습니다. 본격적인 마커를 표기하기에 앞서, 카카오 지도 API를 사용해 보지 않았다면 이 전 게시물을 참고하길 바란다. 카카오 지도에서는 희망하는 과정에서 마커를 띄우기 위하여, 위도와 경도를 사용합니다.

인포윈도우 표시하기

먼저, 인포윈도우를 표시하는 방법이 있습니다. 인포 윈도우info window란 말 그대로, 정보 창을 의미합니다. 이렇게 간결하게 말풍선을 띄워주는 것만으로도, 사용자는 마커가 무슨 의미인지 파악하기 쉬워질 것입니다. kakao, maps.InfoWindow를 이용하여 인포윈도를 선언해 줍니다. 안에 속성으로 들어가는 값으로는 osition 인포윈도우의 위치를 의미합니다. 하지만, 마지막에 infowindow.open으로 마커를 지정해 줄 경우, 무의미한 속성입니다.

content 인포윈도우의 내용을 의미합니다. HTML 태그를 문자열로 넘겨 구현이 가능합니다. 선언이 끝난 infowindow는 open을 이용하여 지도에 표기해 줍니다.

마커 이미지 바꾸기

기본 마커의 경우, 어떤 지역인지 한 번에 알아보기 힘들 수 있어요. 하지만, 아래의 경우라면 어떨까? 야구공이 그려져 있는 마커를 사용함으로써, 야구에 연관된 장소라는 것을 한눈에 알 수 있게 됩니다. 다른 예시로, 위와 같이 한눈에 봐도 버스 정류장이라는 것을 알 수 있게 됩니다. 이같은 경우애 makerImage 변수는 kakao.maps.MakerImage 메서드를 이용하여 생성되며, MakerImage의 인자로는, 마커 이미지의 주소, 마커 이미지의 크기, 마커 이미지의 옵션 값이 필요합니다.

해당 예제의 마커 이미지의 주소는, 카카오 공식 홈페이지에서 사용 중인 주소로, 위의 그림 중 야구공 그림에 해당합니다. 마커 이미지 크기의 경우는, 역시 카카오 예제 그대로 64,69를 사용했다.

지도를 담을 영역을 만든다.

나의경우 테스트를 위해 문서에 있는 그대로 500 400으로 하였습니다.

자주 묻는 질문