오늘 카카오맵 api를 이용해 사용자가 클릭한 위치에 마커를 새기고 다른곳을 클릭했을 때 이전 마커가 다시 클릭한 장소의 좌표로 이동하는 코드를 작성했습니다.
var map = new kakao.maps.Map(mapContainer, mapOption);
var marker = '';
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
kakao.maps.event.addListener(map, 'click', function (mouseEvent) {
// 클릭한 장소의 위도, 경도 가져옴
var latlng = mouseEvent.latLng;
// x좌표와 y좌표를 입력
new_spotx = latlng.getLng()
new_spoty = latlng.getLat()
var markerPosition = new kakao.maps.LatLng(new_spoty, new_spotx);
// 이전에 생성한 마커가 있다면 위치를 업데이트하고, 없다면 새로 생성
if (marker) {
marker.setPosition(markerPosition); // 마커 위치 업데이트
} else {
// 마커 생성
marker = new kakao.maps.Marker({
position: markerPosition,
image: new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(24, 35)) // 마커 이미지 설정
});
marker.setMap(map); // 마커를 지도에 표시
}
});
var marker = '';
먼저 marker
라는 변수를 선언해 마커를 보관하고 있을 장소를 만들어줍니다. imageSrc
는 마커의 이미지, map
은 사이트에서 사용할 지도입니다.
이후 addListener
를 이용해 클릭했을 때 일어날 이벤트를 작성하는 함수를 만들어줍니다.
var latlng = mouseEvent.latLng;
마우스 클릭 이벤트가 일어나면 mouseEvent
에 latLng(위도와 경도)를 가져와 줍니다.
new_spotx = latlng.getLng()
new_spoty = latlng.getLat()
var markerPosition = new kakao.maps.LatLng(new_spoty, new_spotx);
latLng
에 있는 위도와 경도를 가져오는 함수를 각각 변수에 저장해주고 맵에 찍어줄 좌표 위치를 생성해줍니다.
if (marker) {
marker.setPosition(markerPosition); // 마커 위치 업데이트
} else {
// 마커 생성
marker = new kakao.maps.Marker({
position: markerPosition,
image: new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(24, 35)) // 마커 이미지 설정
});
marker.setMap(map); // 마커를 지도에 표시
}
이후 조건문을 이용해 marker
가 존재하지 않는다면 지도에 markerPosition
이 가진 좌표위치로 마커를 생성합니다.
반대로 marker
가 존재한다면 마커의 위치를 다시 클릭해 변경된 위치로 이동시킵니다.
카카오맵 api 사이트에 들어가보면 이미 짜여진 코드나 설명 그리고 주석이 굉장히 상세해서 제가 걱정했던 것 보다는 수월하고 빠르게 작업할 수 있었던 것 같습니다.