마커 제거 방식 및 마커 클릭 이벤트에 콜백 함수에서 인자로 marker를 받는 방법에 대한 문의입니다

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

현재 지도상에 150개의 마커를 표시하고 클릭했을 경우 해당 속성창을 보여주는 것을 구현하는데
주기적으로 상태를 조회하여 지도 상의 마커를 전체 해제하고 다시 표출하는 기능을 구현하고 있습니다.
이 경우 자료 조회 한두번은 괜찮으나 그 이후에는 브라우저 메모리 사용량이 급증하면서 페이지 자체가 멈추는 현상이 생겼습니다.

  1. 기존 마커를 제거하는 정상적인 프로세스는 어떻게 되나요?
    현재는 아래와 같은 코드로 제거를 하고 있습니다. 마커 생성 시마다 listMarker 배열에 추가를 해두고 리로드 시 삭제
    listMarker.forEach(marker => {
    marker.setMap(null);
    });
    listMarker.splice(0, listMarker.length);

  2. 기존 이벤트 할당을 해제하기 위해 removeListener 를 사용하려고 하니 함수를 명시적으로 선언해야하는데 마커의 클릭 이벤트에는 파라메터가 존재하지 않습니다.
    현재, 마커를 클릭했을 때, 마커에 심은 부가 속성(key: prop)을 이용해서 InfoWindow의 내용을 교체하고
    해당 마커에서 창을 open 하는데 예시의 Closure 방식으로만 가능합니다.
    infowindow.setContent(iwContent);
    infowindow.open(map, marker);

2

  1. 지도에서 마커를 제거하려면 첨부하신 코드와 같이 marker.setMap(null)로 삭제하면 됩니다.
    마커 수가 많은 경우 브라우저에 부하를 줄 수 있기 때문에
    우선순위가 높은 마커를 보여주고 그 외 마커는 목록으로 나타내거나 마커 클러스터를 이용하는 방법도 고려해주세요.

  2. 여러개 마커 표시하기 예제로 설명드리면 클릭 이벤트 핸들러 함수를 선언하고
    마커를 생성하는 반복문에서 클릭 이벤트를 등록해주세요.
    클릭된 마커 정보는 클릭 이벤트 함수에서 this로 가져올 수 있습니다

//마커 클릭 이벤트 핸들러를 선언합니다.
function clickHanlder() {
    //클릭한 마커의 title 정보를 출력합니다.
    console.log(this.getTitle());
}    

for (var i = 0; i < positions.length; i ++) {
    //마커 생성하기 
   var marker = new kakao.maps.Marker({…});

    //마커 클릭 이벤트를 등록합니다. 
    kakao.maps.event.addListener(marker, 'click', click);
}
1개의 좋아요