커스텀 오버레이 클릭하여 열고 클릭하여 닫으려하는데 안됩니다 도와주세요 ㅜ

지도/로컬 API
#1 
axios.get("/gallery/list")
        .then(function(response) {
            console.log(response.data);
            // 데이터에서 좌표 값을 가지고 마커를 표시합니다
            // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
            let markers = $(response.data).map(function(i, position) {
                var maks = new kakao.maps.Marker({
                    position : new kakao.maps.LatLng(position.latitude, position.longitude),
                })

                var overlay = new kakao.maps.CustomOverlay({
                    map : null,
                    position : new kakao.maps.LatLng(position.latitude, position.longitude),
                    content : '<a href="/boardDetail/'+position.id+'"><div class="wrap">' +
                        '    <div class="info">' +
                        '        <div class="title">' +
                                        position.userEntity.name +
                        '        </div>' +
                        '        <div class="body">' +
                        '            <div class="img">' +
                        '                <img src="'+position.imgFullPath+'" width="73" height="70">' +
                        '           </div>' +
                        '            <div class="desc">' +
                        '                <div class="ellipsis titlefont">'+position.title+'</div>' +
                        '                <div class="jibun ellipsis">'+position.createdDate+'</div>' +
                        '                <div class="ellipsis">좋아요'+position.like+'개&nbsp 댓글'+position.count+'개</div>' +
                        '            </div>' +
                        '        </div>' +
                        '    </div>' +
                        '</div></a>'

                })
                kakao.maps.event.addListener(maks, 'mouseover', function() {
                    overlay.setMap(map);
                });

                kakao.maps.event.addListener(maks, 'click', function() {
                    overlay.setMap(null);
                });
                return maks;

            });


            clusterer.addMarkers(markers);
        });

지금은 마우스가 올라가면 오버레이가 나오게하고 클릭하면 닫히는 방식으로 해놓았는데
클릭하면 열리고 클릭하면 닫히게 하고싶은데 예제에 없는거 같네요…ㅠㅠ
둘다 클릭으로 해놨더니 열리고 바로닫히는지 열리지도 않더라구요

#2

상태변수를 마커마다 하나 두세요.
해당 상태변수를 보고 닫힌 상태라면 열리게 하고, 아니라면 닫히게 하고 그렇게 하면 될것 같습니다.
상태변수는 maks 만든 곳에 클로져 형식으로 해도되고
maks에 새로운 속성을 추가해서 관리하셔도 되구요.
아예 새로운 데이터 모델을 만들어서 관리하셔도 되구요.

#3

계속 해봤는데 마커마다 상태변수를 어떻게 두면 좋을까요… 2일째 못하고있어용 ㅠㅠ 죄송합니다

#4 
var isOpen = false;

kakao.maps.event.addListener(maks, 'click', function() {
    if (!isOpen) {
        overlay.setMap(map);
        isOpen = true;
    } else {
        overlay.setMap(null);
        isOpen = false;
    }
});

maks, overlay와 같은 객체들이 함수 스코프 안에서 생성되고 있기 때문에,
같은 스코프 안에서 상태변수로 쓸 변수 하나 만들어서 관리를 하셔도 큰 문제는 없습니다.

제가 위 코드처럼 var isOpen 이라는 변수를 하나 만들었지만,
overlay.isOpen = false;

이런식으로 붙혀도 상관은 없으시구요. 다만 API의 생성자를 통해 나온 객체에 특정 속성값을 부여할때는
자바스크립트는 바로 덮어 써버리기 때문에 maks, overlay객체의 내부에 isOpen이라는 속성이 이미 존재 하는가 체크는 필요합니다.

아무튼 상태변수를 하나 두고 이를 true/false 컨트롤을 통해서 작업을 하시면 되실거에요.

마지막으로 나는 상태변수를 쓰기 싫다 하신다면
overlay.getMap() 함수를 통해서 할 수도 있습니다.
overlay가 지도에 표시되고 있을때는 getMap()함수를 호출하면 지도 객체가 리턴이 됩니다.
그런데 overlay가 지도에서 사라졌을때는 getMap() 함수를 호출하면 null값이 나오게 됩니다.

if (!overlay.getMap()) { //null 인경우 - 지도에 없으니
     overlay.setMap(map); //지도에 올린다.
} else {
     overlay.setMap(null);
}

이렇게도 가능합니다.

한번 참고해 보세요.
다만 모든 프로그래밍 로직은 정답이란건 없습니다. 각자 만들고 싶은 기능이 같더라도 구현방법이 모두 다르고, 내부적으로 어떻게 설계를 해서 구현을 하고 있는지에 따라 서로서로 달라지기 때문에, 이러한 방법으로 구현이 가능하겠구나 정도로만 판단하시고 a71656420님의 코드에 맞게 적절히 구현하시면 되실거에요.

#5

정말 감사합니다… 저도 꼭 남에게 도움을 줄수있는 멋진 사람이 되도록 노력할게요^!!

2개의 좋아요