이번에 지도 관련 토이프로젝트를 진행하면서 사용한 카카오맵 API에 대해서 기본적인 내용을 정리하려고 한다.
카카오에서 제공하는 API 문서를 보면 자세하게 나와있지만, 리액트에 맞게 바꿔서 사용해야 되는 부분도 있었다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
src/index.html
에서body
하단에 붙여주면 된다.
Map.js
const Map = () => {
const [kakaoMap, setKakaoMap] = useState(null);
const container = useRef(null);
const initMap = () => {
const center = new kakao.maps.LatLng(33.36256187769044, 126.52903781775196);
const options = {
center,
level: 8,
};
const map = new kakao.maps.Map(container.current, options);
setKakaoMap(map);
};
useEffect(() => {
initMap();
}, []);
return <MapContainer id="KakaoMap" ref={container} />;
}
const MapContainer = styled.div`
width: 100%;
height: 100vh;
`;
useRef()
를 이용해서MapContainer
에 지도를 보여줄 수 있다.
initMap()
은 최초 지도를 생성하는 함수이다. (함수명은 원하는대로 사용하면 된다.)
center
는 지도의 중심 좌표를 나타내고level
은 지도를 얼마나 확대할 것인지에 대한 옵션이다.
Map.js
let marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(position.latitude, position.longitude),
title: position.longitude,
image: null,
clickable: true,
});
marker.setMap(kakaoMap);
지도에 마커를 생성할 때는
setMap()
함수를 이용해서 마커를 생성한다.
setMap()
에서 사용한kakaoMap
은initMap()
함수를 통해서 생성한 지도를useState()
를 통해서 상태로 저장한 것이다.
따로 상태 관리를 하지 않는다면, 지도에서 할 수 있는 여러가지 기능들을 지도를 생성함과 동시에 사용해야 할 것이다.
Map.js
let infowindow = new kakao.maps.InfoWindow({
content: position.placeName,
});
kakao.maps.event.addListener(marker, "mouseover", makeOverListener(kakaoMap, marker, infowindow));
kakao.maps.event.addListener(marker, "mouseout", makeOutListener(infowindow));
function makeOverListener(map, marker, infowindow) {
return function () {
infowindow.open(map, marker);
};
}
function makeOutListener(infowindow) {
return function () {
infowindow.close();
};
}
marker
를 생성하면서 같이 생성한다.
생성한marker
에event
를 넣어주는 것이다.
mouseover
,mouseout
2개의 함수를 사용했지만,click
과 같은 다른 함수를 사용할 수 있다.
카카오맵 API 사이트를 보면 다양한 기능과 자세한 문서를 볼 수 있다.
지도와 관련된 프로젝트도 처음 만들어보고 지도 관련 API도 처음 사용하다보니 헷갈리고 헤매는 부분도 많았다.
조금씩이라도 정리하면서 많은 경험을 해보는 것이 좋을 것 같다.
이벤트를 등록하고 새로고침하면 이벤트가 사라지지 않나요?