[TIL #60] 최종프로젝트 #9 카카오맵 클릭한 장소 마커새기기

오늘 카카오맵 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 사이트에 들어가보면 이미 짜여진 코드나 설명 그리고 주석이 굉장히 상세해서 제가 걱정했던 것 보다는 수월하고 빠르게 작업할 수 있었던 것 같습니다.