[다음 지도api] 클러스터,마커 만들기와 지우기 이벤트 사용하기

  이 포스팅은 마커 클러스터에 표시할 마커 집합의 생성과 커스텀 오버레이, 추가와 삭제에 관한 예제입니다.  지도 개체 생성과 기본 옵션 정의는 메뉴얼의 샘플을 참고하시기 바랍니다.

1. 기본 선언 및 함수 정의

var _cluster = {};
_cluster.markers = [];
_cluster.overlay = [];
_cluster.marker = [];
_cluster.markerItemNos = [];
_cluster.images = {
    'item': '{{마커이미지}}',
    'item2': '{{마커이미지2}}'
};
//오버레이 클리어
_cluster.overlay.clear = function () {
    if (_cluster.overlay.length > 0) {
        for (var index = 0; index < _cluster.overlay.length; index++) {
            _cluster.overlay[index].setMap(null);
        }
    }
};
//마커 클리어
_cluster.marker.clear = function () {
    if (_cluster.marker.length > 0) {
        for (var index = 0; index < _cluster.marker.length; index++) {
            _cluster.marker[index].setMap(null);
        }
    }
};
//지도위 클리어
_cluster.clear = function () {
    if (_cluster.overlay)
        _cluster.overlay.clear();

    if (_cluster.marker)
        _cluster.marker.clear();

    if (_cluster.markers)
        _cluster.markers.clear();
}

2. 데이터로부터 마커 생성, 삭제를 위한 배열 저장

// n개의 마커를 생성한다.
var markers = $({{마커데이터들}}).map(function (i, item) {
    var imageSrc = _cluster.images.item, // 마커이미지의 주소입니다    
        imageSize = new daum.maps.Size(32, 32), // 마커이미지의 크기입니다
        imageOption = { offset: new daum.maps.Point(16, -6), background: '#FFF' }; // 마커이미지의 옵션입니다.

    var content = '{{커스텀오버레이}}';

    var marker = new daum.maps.Marker({
        position: new daum.maps.LatLng(item.lat, item.lng),
        image: new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
        clickable: true,
        title: '{{마커고유키}}'
    });

    // 마커에 클릭이벤트를 등록합니다
    daum.maps.event.addListener(marker, 'click', function () {
        if (_cluster.overlay.length > 0)
            _cluster.overlay.clear();

        // 커스텀 오버레이를 생성합니다
        var customOverlay = new daum.maps.CustomOverlay({
            map: {{지도개체}},
            position: marker.getPosition(),
            content: content,
            yAnchor: 0.5,
            xAnchor: 0.5,
            zIndex: 3
        });

        customOverlay.setMap({{지도개체}});
        _cluster.overlay.push(customOverlay);
    });

    return marker;
});
// 클러스터러에 마커들을 추가합니다
_cluster.markers.addMarkers(markers);

3. 클러스터 클릭 이벤트 추가

// 클러스터에 클릭이벤트를 등록합니다
daum.maps.event.addListener(_cluster.markers, 'clusterclick', function (cluster) {
    _cluster.markerItemNos = [];

    $.each(cluster.getMarkers(), function (index, item) {
        _cluster.markerItemNos.push(item.getTitle());
    });

    {{고유값들을 가지고 실행할 함수}}
});