카카오 지도 보이는 영역 내 마커만 표출 방법

카카오 지도 보이는 영역 내 마커만 표출 방법

 

 

카카오 지도에서 보이는 영역 내 마커만 표출하는 방법을 알아보도록 하겠습니다.

 

보통 지도 내 표출해야 될 마커의 개수가 많을 경우 브라우저의 성능이 현저히 떨어지기 때문에

지도 레벨과 영역에 따라 표출할 마커를 다르게 설정합니다.

 

카카오 지도의 레벨 변경 감지 이벤트는 아래와 같이 추가 할 수 있습니다.

kakao.maps.event.addListener(MAP, "zoom_changed", function() {
		//do something..
});

콜백 함수 내에서는 this.getLevel() 을 통해 현재 레벨 값을 구할 수 있습니다.

예를 들어 3 레벨 이하일 경우에만 지도 영역 내 모든 정보를 가져오는 코드를 작성해보겠습니다.

 

kakao.maps.event.addListener(MAP, "zoom_changed", function() {
        if(this.getLevel() <= 3){
        	//마커 조회 및 표출
        }else{
        	//마커 제거
        }
});

 

지도의 영역은 getBounds 함수를 통해 얻을 수 있습니다.

var neLat = this.getBounds().getNorthEast().getLat();
var neLng = this.getBounds().getNorthEast().getLng();
var swLat = this.getBounds().getSouthWest().getLat();
var swLng = this.getBounds().getSouthWest().getLng();

위와 같은 지도 영역 북동쪽 좌표값과 남서쪽 좌표값을 구해

마커의 위경도 값이 해당 범위 내에 존재하는 것만 표출해 주시면 됩니다.

 

Mybatis 조건 예

<if test="swLng != '' and swLng != null and neLng != '' and neLng != null">
    AND LNG BETWEEN #{swLng} AND #{neLng}
</if>
<if test="swLat != '' and swLat != null and neLat != '' and neLat != null">
    AND LAT BETWEEN #{swLat} AND #{neLat}
</if>