마커, 오버레이 이용시 마커 click 이벤트 등록에 따른 오버레이 제어 방법

안녕하세요.

마커와 오버레이를 사용하여 지도상에 출력하고 있고, 오버레이 같은 경우 마커에 클릭 이벤트를 등록하여

마커 클릭시 해당 마커에 대한 오버레이를 동적으로 생성하여 출력하고 있습니다.

다만, 지도상에 여러 개 마커가 존재하고,

각각의 마커를 클릭하면 이전에 출력된 오버레이는 자동으로 사라지고

현재 클릭된 마커에 대한 오버레이만 출력하고 싶습니다.

이럴 땐 어떤 방법으로 코드를 수정해야 하는지 조언 부탁드리겠습니다.

지금은 동적으로 생성된 오버레이에 “x” 버튼을 출력하여 “x” 버튼 클릭시 오버레이가 닫히는 식으로 개발을 진행하였습니다.
(참고 : 다중 마커 커스텀 오버레이 닫기 기능 문의)
zoo_img1

아래 코드입니다.

$(function () {
    $.ajax({
        url: '[마커, 오버레이 정보를 가져올 URL]',
        type: 'get',
        dataType: 'json',
        cache: false,
        success: function (data) {
            if (data !== undefined) {
                var mapContainer = $('.VR_map')[0]; // 지도를 표시할 div 
                var mapOption = {
                    center: new kakao.maps.LatLng(35.855117, 127.144332), // 지도의 중심 좌표
                    level: 2 // 지도의 확대 레벨
                };

                var map = new kakao.maps.Map(mapContainer, mapOption); // 지도 생성

                map.setMapTypeId(kakao.maps.MapTypeId.HYBRID); // 스카이뷰 설정

                var positions = []; // 마커 정보
                var overlaies = [] // 오버레이 정보

                for (var i = 0; i < data.spot.length; i++) {
                    var spotObj = {
                        title: data.spot[i].title,
                        latlng: new kakao.maps.LatLng(data.spot[i].lat, data.spot[i].lng),
                        imageSrc: '/resource_zoo/img/content/VR/icon_marker' + data.spot[i].spoticon + '.png',
                        imageWith: 36,
                        imageHeight: 48
                    };
                    var overlayInfo = {
                        title: data.spot[i].title,
                        thumbnail: data.spot[i].thumbnail,
                        description: data.spot[i].description
                    }

                    positions.push(spotObj);
                    overlaies.push(overlayInfo);
                }

                for (var i = 0; i < positions.length; i++) {
                    var imageSize = new kakao.maps.Size(positions[i].imageWith, positions[i].imageHeight); // 마커 이미지 크기
                    var markerImage = new kakao.maps.MarkerImage(positions[i].imageSrc, imageSize); // 마커 이미지 생성
                    // 마커를 생성합니다
                    var marker = new kakao.maps.Marker({
                        map: map, // 마커를 표시할 지도
                        position: positions[i].latlng, // 마커를 표시할 위치
                        title: positions[i].title, // 마커의 타이틀(마우스를 올리면 타이틀 표기)
                        image: markerImage // 마커 이미지 
                    });

                    marker.setMap(map); // 마커 표기

                    // 마커 Click 이벤트 등록
                    kakao.maps.event.addListener(marker, 'click', makeOverlayListener(map, marker, overlaies[i]));
                }
            } else {
                // console.log('출력할 VR 자료가 없습니다.');
            }
        },
        error: function (request, status, error) {
            // console.log(request.status, request.responseText, error);
        }
    });
});

function makeOverlayListener(map, marker, overlay) {
    return function () {
        // 커스텀 오버레이 생성
        var customOverlay = new kakao.maps.CustomOverlay({
            position:marker.getPosition(),
            xAnchor: 0.0,
            yAnchor: 0.5
        });

        var $content = $('<div></div>').addClass('spot_content');
        var $thumbnail = $('<div></div>').addClass('img_area');
        var $info = $('<div></div>').addClass('text_area');
        var $title = $('<div></div>').addClass('tit');
        var $close = $('<button type="button">x</button>');

        // Button click 이벤트 등록
        $close.on('click', function() {
            customOverlay.setMap(null);
        });
        
        $thumbnail.append('<img src="' + overlay.thumbnail + '" alt="' + overlay.title + '"/>');
        $title.append('<h4>' + overlay.title + '</h4>');
        $title.append('<a href="" class="link">VR 보기</a>');
        $info.append($title);
        $info.append('<p>' + overlay.description + '</p>');
        $content.append($thumbnail);
        $content.append($info);
        $content.append($close);

        customOverlay.setContent($content[0]);
        customOverlay.setMap(map);
    }
}

두 가지 방법으로 구현이 가능합니다.

  1. 전역으로 커스텀 오버레이를 생성하고
    마커 클릭 시 커스텀 오버레이의 컨텐츠와 위치를 잡아주는 방식으로 구현

  2. 반복문 내에 각각의 마커와 커스텀 오버레이를 생성 및 배열로 관리
    마커 클릭 시 생성한 오버레이 배열 또는 이전 오버레이를 변수로 담은 객체의 setMap(null); 을 호출하여
    지도에서 삭제 후 클릭한 마커에 해당하는 오버레이만 지도 표출되는 방식으로 구현

아래 게시글도 참고해주세요.

좋아요 1