클러스터 클릭후 나타나는 마커 클릭이벤트을 걸고 싶습니다

지도/로컬 API
#1

클러스터 을 작업중입니다만, 클러스터 클릭 후 표출 되는 마커에 클릭 이벤트을
걸어 작업을 진행 하고 싶은 클릭 이벤트가 작동 되질 않습니다.
에러는 발생되지 않고 마커을 클릭 해도 아무런 증상이 없습니다.
작업은 아래 처럼 했는데 도움을 부탁 드려도 될까요?

var mapContainer = document.getElementById('map'),  
mapOption = { 
center:  new daum.maps.LatLng(36.2683, 127.6358), 
level: 14 
}

var map = new daum.maps.Map(mapContainer, mapOption);

var clusterer = new daum.maps.MarkerClusterer({
map: map, 
averageCenter: true, 
minLevel: 10, 
disableClickZoom: true
});

$.get("freezeloc.do", function(data) {
 var datas = data.data;
var markers = $(data.data).map(function(i, position) {
	
    return new daum.maps.Marker({
        position : new daum.maps.LatLng(position.mart_lat, position.mart_lon),
        clickable: true
    });
});

 clusterer.addMarkers(markers);
});

var pk = new Array();
클러스터 클릭 이벤트
daum.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {
var mk = cluster.getMarkers();
  
for(var i=0; i < mk.length;i++){

	pk.push('new 
   daum.maps.LatLng('+mk[i].getPosition().getLat()+','+mk[i].getPosition().getLng()+')');
}

    var level = map.getLevel()-1;

    map.setLevel(level, {anchor: cluster.getCenter()});


   var iwContent = '<div style="padding:5px;">Hello World!</div>', 
   iwRemoveable = true;


 var infowindow = new daum.maps.InfoWindow({
 content : iwContent,
 removable : iwRemoveable
 });

 var marker = new daum.maps.Marker({
  position: pk,
  clickable: true 
});
daum.maps.event.addListener(marker, 'click', function() {
  
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);  
});
});
#2

우선… clusterclick 이벤트 핸들러에 작성한 코드를 보면
구현하고자 하는게 클러스터러 마커가 아닌 각각 개별마커에 이벤트를 걸어도 무방한건가요?
그렇다면 클러스터러가 클릭되었을때가 아닌 'freezeloc.do’에서 데이터를 가져오는 $.get 콜백함수 내에서
마커들을 만들어 클러스터러에 넣는 부분위에 마커에 클릭이벤트를 추가하는 구문울 추가하시면 됩니다.

clusterclick 작성한 코드에도 문제가 있는데
우선 ‘클러스터 클릭 이벤트’ 라는 주석처럼 보이는 문장이 주석처리 되어있지 않고
pk라는 배열에 LatLng 를 스트링으로 넣고 나중에 마커의 위치로 사용하는데, 마커의 위치로 사용할 수 없습니다.
아래와 같이 스트링값이 아닌 LatLng 객체 인스턴스를 만들어 배열에 넣으셔야하고
pk.push(new daum.maps.LatLng(mk[i].getPosition().getLat(), mk[i].getPosition().getLng()));

마커를 만들어서 position에 pk 배열을 넣으시는데 마커 위치는 배열값이 아니라 LatLng 객체를 넣으셔야 합니다.
클러스터러 문서를 참고하셔서 원하는 기능을 구현하시기 바랍니다.
http://apis.map.daum.net/web/documentation/#MarkerClusterer

#3

도움이 많이 되었습니다. 감사합니다.
몇가지 질문을 더 드리겠습니다.

1.클러스터러 마커가 클릭 했을때 표출 되는 개별마커 클릭시 이벤트을 걸고싶습니다.

  • 위에서 도움주셨던 부분을 참조 하여 제가 원하는 클러스터러 마커 클릭 후
    표출 되는 개별마커 클릭시 이벤트을 걸고 싶었었는데요. 수정 해본 소스는

    daum.maps.event.addListener(clusterer, ‘clusterclick’, function(cluster) {

    var mk = cluster.getMarkers();
    for(var i=0; i < mk.length;i++){
    var marker = new daum.maps.Marker({
    position: new daum.maps.LatLng(mk[i].getPosition().getLat(), mk[i].getPosition().getLng())
    });

      marker.setMap(map);
  
  daum.maps.event.addListener(marker, 'click', function() {
  	  console.log('개별이벤트 들어옴')
  });

    }
    clusterer.clear(); //클러스터러 을 모두 지우고 개별 마커을 다시 넣어 봤습니다.
    var level = map.getLevel()-1;

    map.setLevel(level, {anchor: cluster.getCenter()});

    });

이렇게 구현 해보니 개별마커 이벤트가 먹히긴 합니다.
그런데 이렇게 되면 다른 클러스터러도 모두 다 클리어 되지 않나요?

  1. 1번 구현 그대로 두고 클러스터러 을 클릭 하지 않고 피치줌/아웃 을 하면 클러스터러 마커가 사라지고 개별 마커가 나오지만
    개별이벤트가 먹히지가 않더군요.

정리하자면
클러스터러 마커 사라진 이후 표출 되는 개별마커에 대한 개별이벤트을 걸고 싶으며,
피치줌/아웃 해도 유지 개별마커 이벤트가 작동되게 만들고 싶습니다.
꼭! 이기능을 써보고 싶습니다. 조언 부탁드립니다.

#4

제가
“클러스터러가 클릭되었을때가 아닌 'freezeloc.do’에서 데이터를 가져오는 $.get 콜백함수 내에서
마커들을 만들어 클러스터러에 넣는 부분위에 마커에 클릭이벤트를 추가하는 구문을 추가하시면 됩니다.” 라고 말씀 드렸었는데
clusterer 클릭 이벤트에 마커 이벤트를 등록하셨네요.

제가 이해하기로는 클러스터링 되다가 개별마크가 보이게 되면 그 마커에 클릭 이벤트를 넣고싶으신거라면
말씀드린대로 마커를 ajax로 얻어오는 get 콜백내에서 개별마커에 클릭이벤트를 등록하시면 됩니다. 어차피 클러스터러 객체에 마커객체를 생성해서 넣기때문에 마커객체의 참조를 가져가게 되는거니까 이벤트는 유효합니다. 아래 글을 참고해주세요
https://devtalk.kakao.com/t/topic/48917

1개의 좋아요