[javascript] kakaomap api 도형 event listener 배열 객체 등록 꿀팁

카카오맵에 도형을 나타내고자 할때 

전역배열로 도형을 넣는다면 삭제(초기화)도 쉽게 할 수 있다. 

 

하지만 전역배열로 도형을 넣을 때의 단점도 있는데

도형을 클릭했을때 실행되는 이벤트 리스너에 배열을 객체로 등록하면 

도형의 메서드를 사용하지 못한다는 점이다 ( 예를 들면 getBounds나 getPosition 같은 메서드들 )

 

해결 방법은 이벤트리스너를 새로운 함수 안에 넣어 배열을 매개변수로 해서 매개변수의 메서드를 사용하게 만드는 것이다. 

말이 좀 이해가 안되는 것 같아 코드를 첨부한다.

 

아래처럼 배열을 객체로 등록하지 않고

kakao.maps.event.addListener(circle[i], 'click', function(mouseEvent) {
        ...
 }

 

이런식으로 함수로 한번 감싸서 사용해야한다는 말이다.

function pointExp(circle){
    kakao.maps.event.addListener(circle, 'click', function(mouseEvent) {
    	var bounds = circle.getBounds();
      ...
     }
}

pointExp(circle[i])

이렇게 한다면 circle 배열로 도형(circle)의 메서드도 사용가능하고 도형배열로 초기화도 가능하게 된다.