[Etc] Kakao Maps 단일 오버레이 관리하기

 

1. 카카오맵 API 공식 사이트 샘플 코드 참고

• 처음 맵 API를 가져와 내가 원하는 기능을 설계하기 위해선 필요한 코드를 수정해야하지만 기본 틀을 잘 제공해주고 있어 참고하였다.
• 참고한 두가지 Sample Code이다.
  
  1. 마커 생성하기 Sample Code
  2. 커스텀 오버레이 Sample Code

2. 공식 사이트 Sample Code를 활용하여 class화 하기

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

class CustomContent {
    constructor(idV, contentTitle, contentLat, contentLng, markerImg, wishBest, wishImg, wishAddr, wishMemo, wishSite) {
        this.idV = idV;
        //찜한 목록 정보가져오기
        this.contentTitle = contentTitle;
        this.contentLat = contentLat;
        this.contentLng = contentLng;
        this.imgSrc = markerImg;
        this.wishBest = wishBest;
        this.wishImg = wishImg;
        this.wishAddr = wishAddr;
        this.wishMemo = wishMemo;
        this.wishSite = wishSite;
        //maker, overlay
        this.contentMarker = null;
        this.contentOverlay = null;
        //마커
        this.markerImg = null;
        this.mImgSize = null;

        //overlay template
        this.overlayContent =
            `<div class="wrapPage">
                <div class="infoSec">
                    <div class="titleData">
                        ${this.contentTitle}
                        <div class="closeBtn" title="닫기" ></div>
                    </div>
                    <div class="bodyData">
                        <div class="imgData">
                            <img src="../../src/img/sampleDataimg/${this.contentTitle}/${this.wishImg}1.jpg" width="73" height="70">
                        </div>
                        <div class="descData">
                            <div class="ellipsisWish">${this.wishBest}</div>
                        
                            <button class="sDetailEx">상세설명 보러 가기</button>
                        </div>
                    </div>
                </div>
            </div>`;
    }//constructor()
    
    //마커를 생성하는 메서드
    createMarker() {
        this.mImgSize = new kakao.maps.Size(35, 40);
        this.markerImg = new kakao.maps.MarkerImage(this.imgSrc, this.mImgSize);
        this.contentMarker = new kakao.maps.Marker({
            "map": map,
            "position": new kakao.maps.LatLng(this.contentLat, this.contentLng),
            "image": this.markerImg
        })
    }//createMarker()

    //오버레이 생성 메서드
    createOverlay() {
        this.contentOverlay = new kakao.maps.CustomOverlay({
            "content": this.overlayContent,
            "position": this.contentMarker.getPosition(),
            "clickable": true
        })

        //마커를 클릭하였을 때 오버레이 작동 클릭 이벤트
        kakao.maps.event.addListener(this.contentMarker, "click", () => {
            //현재 클릭된 마커의 overlay 띄움
            this.contentOverlay.setMap(map);
            selectOverlay = this.contentOverlay;

            //overlay안 상세설명 보러가기 옵션
            document.querySelectorAll('.sDetailEx').forEach(v => {
                console.log(v);
                v.addEventListener('click', () => {
                    showPopUp(this.contentTitle, this.wishBest, this.wishAddr, this.wishMemo, this.wishSite, this.wishImg);
                    document.querySelector('.hIntroPopupWrap').style.transform = "scale(1)";
                })
            })
            //오버레이의 닫기 버튼 작동 
            document.querySelectorAll(".closeBtn").forEach((v) => {
                console.log(document.querySelectorAll(".closeBtn"));
                v.addEventListener("click", () => {
                    this.controllCloseOverlay();
                })
            })
        })
    }//createOverlay()

    //오버레이 닫는 메서드
    controllCloseOverlay() {
        console.log(this.overlayContent);
        this.contentOverlay.setMap(null);
    }//controllCloseOverlay()
} // END CustomContent

로컬에선 열심히 확인했지만, 항상 다른 환경에서 다른 사람이 서비스를 이용하면 문제가 생기기 마련이다!

 

따라서 class화하여 로컬에서 테스트하고 프로젝트 서버에 커밋한 다음 팀원들에게 테스트를 부탁하였다. 

 

팀원 피드백 : 정상적으로 작동한다! 

 

따라서 클래스화 함에 있어서 지도 위의 마커와 오버레이를 관리하기 편해졌다. 

하지만, 여러가지 테스트를 해보다가 지도 위의 여러 개 마커 클릭 시 클릭한 마커의 오버레이들이 모두 지도에 생성되었고 오버레이를 관리하는데 어려움을 느꼈다. 

 

이 점을 개선하고자 단일 오버레이 관리 코드를 추가하였다.

 

3. 단일 오버레이 관리 코드 추가

Class 밖에 오버레이 변수인 selectOverlay를 생성한 후 오버레이 생성 메서드 부분에서 다른 마커 클릭 시 생성되어 있는 오버레이를 초기화 시켜주는 방식으로 코드를 설계하였다.

var map = new kakao.maps.Map(mapContainer, mapOption);
//customOverlay 다른 마커 클릭했을 때 초기화 시켜주는 변수
let selectOverlay = null;

class CustomContent {
    constructor(idV, contentTitle, contentLat, contentLng, markerImg, wishBest, wishImg, wishAddr, wishMemo, wishSite) {
        this.idV = idV;
        //찜한 목록 정보가져오기
        this.contentTitle = contentTitle;
        this.contentLat = contentLat;
        this.contentLng = contentLng;
        this.imgSrc = markerImg;
        this.wishBest = wishBest;
        this.wishImg = wishImg;
        this.wishAddr = wishAddr;
        this.wishMemo = wishMemo;
        this.wishSite = wishSite;
        //maker, overlay
        this.contentMarker = null;
        this.contentOverlay = null;
        //마커
        this.markerImg = null;
        this.mImgSize = null;

        //overlay template
        this.overlayContent =
            `<div class="wrapPage">
                <div class="infoSec">
                    <div class="titleData">
                        ${this.contentTitle}
                        <div class="closeBtn" title="닫기" ></div>
                    </div>
                    <div class="bodyData">
                        <div class="imgData">
                            <img src="../../src/img/sampleDataimg/${this.contentTitle}/${this.wishImg}1.jpg" width="73" height="70">
                        </div>
                        <div class="descData">
                            <div class="ellipsisWish">${this.wishBest}</div>
                        
                            <button class="sDetailEx">상세설명 보러 가기</button>
                        </div>
                    </div>
                </div>
            </div>`;
    }//constructor()
    
    createMarker() {
        this.mImgSize = new kakao.maps.Size(35, 40);
        this.markerImg = new kakao.maps.MarkerImage(this.imgSrc, this.mImgSize);
        this.contentMarker = new kakao.maps.Marker({
            "map": map,
            "position": new kakao.maps.LatLng(this.contentLat, this.contentLng),
            "image": this.markerImg
        })
    }//createMarker()

    //오버레이 생성 메서드
    createOverlay() {
        this.contentOverlay = new kakao.maps.CustomOverlay({
            "content": this.overlayContent,
            "position": this.contentMarker.getPosition(),
            "clickable": true
        })

        //마커를 클릭하였을 때 오버레이 작동 클릭 이벤트
        kakao.maps.event.addListener(this.contentMarker, "click", () => {
            console.log('clickablue', this.contentOverlay.clickable);
            //선택된 overlay가 있으면 해당 overlay를 지우고 새로운 overlay를 띄우는 조건
            if (selectOverlay != null) {
                selectOverlay.setMap(null);
            }
            //현재 클릭된 마커의 overlay 띄움
            this.contentOverlay.setMap(map);
            selectOverlay = this.contentOverlay;

            //overlay안 상세설명 보러가기 옵션
            document.querySelectorAll('.sDetailEx').forEach(v => {
                console.log(v);
                v.addEventListener('click', () => {
                    showPopUp(this.contentTitle, this.wishBest, this.wishAddr, this.wishMemo, this.wishSite, this.wishImg);
                    document.querySelector('.hIntroPopupWrap').style.transform = "scale(1)";
                })
            })
            //오버레이의 닫기 버튼 작동 
            document.querySelectorAll(".closeBtn").forEach((v) => {
                console.log(document.querySelectorAll(".closeBtn"));
                v.addEventListener("click", () => {
                    this.controllCloseOverlay();
                })
            })
        })
    }//createOverlay()

    controllCloseOverlay() {
        console.log(this.overlayContent);
        this.contentOverlay.setMap(null);
    }//controllCloseOverlay()
} // END CustomContent

 

이후 팀원에게 테스트를 부탁드렸다. 모든 환경에서 정상적으로 작동하는 것을 확인하였다. 끝!