cluster 에서 마우스 오버시 이미 선언된 스타일과 다른 스타일을 줄려고 합니다.
예를 들어서
현재는 반투명 파란 바탕에 흰색 글자인데… 마우스를 올리면
파란테두리에 흰바탕 파란색 글자로 변형을 하고 싶은데… 이걸 지원해 주는 함수나 속성이 있는지요?
없는거 같아서 저는 마우스 오버를 하면
해당 클러스터를 remove 하고 그 자리의 중앙 좌표를 받아서 원을 그리고 싶은데 문제는 원중앙에 원래 클러스터에 있던 글자(숫자) 를 표현할 수가 없네요… 그리고 remove 도 안되는거 같고…
도움 부탁 드립니다.
setStyles(), redraw() API를 활용하여 스타일 변경할 수 있습니다.
아래 http://apis.map.kakao.com/web/sample/basicClusterer/ 예제를 바탕으로 한
소스 코드 참고해주시고,
클러스터의 스타일은 크기마다 설정할 수 있으므로
http://apis.map.kakao.com/web/sample/chickenClusterer/ 예제도 같이 참고해주세요.
kakao.maps.event.addListener( clusterer, 'clusterover', function( cluster ) {
clusterer.setStyles([{
width : '40px',
height : '40px',
background: 'black',
color: '#fff',
textAlign: 'center',
lineHeight: '40px',
borderRadius: '50px'
},
{
width : '60px',
height : '60px',
background: 'white',
color: 'blue',
border: '1px solid blue',
textAlign: 'center',
lineHeight: '60px',
borderRadius: '60px'
}]);
clusterer.redraw();
});답변 감사합니다.
하지만 제 질문은 전체를 다시 그리는게 아니고 마우스 오버한 개체 하나의 스타일을 변경하는 것을 질문 한겁니다.
전체를 redraw 하는게 안니라… 위에 예제처럼
kakao.maps.event.addListener( clusterer, ‘clusterover’, function( cluster ) {
cluster.setStyles([{
width : ‘40px’,
height : ‘40px’,
background: ‘black’,
color: ‘#fff’,
textAlign: ‘center’,
lineHeight: ‘40px’,
borderRadius: ‘50px’
}]);
cluster.redraw();
});
이런 식으로 받아오는 개체인 cluster 자체의 스타일을 세팅 할 수도 있는지요?
아무튼 제가 바꾸고 싶은 개체는 현재 마우스가 오버되어 있는 개체 하나의 스타일을 변경하는 겁니다.
하지만 이 경우에도 테두리를 줄수는 없는거 같은데…
제 생각에는 마우스 오버 되어 있는 cluster 개체 하나만 remove 하거나 스타일을 변경하고 배경색을 흰색으로 변경하고 테두리를 circle 을 이용해서 그림을 그리는게 어떨까 합니다. 좋은 방벙이 있을지요?
제가 앞서 단 댓글에 설명이 부족했습니다.
하나의 객체로 스타일은 변경할 수 없지만, 클러스터러의 사이즈/크기별 스타일을 정할 수 있기 때문에
변경하고 싶은 클러스터 객체의 사이즈에 맞는 스타일을 선언하고, 마우스 오버 시 해당 크기의 스타일을 변경할 수 있습니다.
이런 방법으로 사용하시는 건 어떤가요?
다만, 이 방법은 같은 사이즈의 클러스터가 여럿 있다면 같이 스타일이 변경되므로
질문자 분이 하려는 의도와는 맞지 않을 수 있습니다.
그럼 이런건 가능한지요…
마우스 오버한 개체의 고유값 같은게 있으면 스타일을 다시 세팅할때 그 개체에만 적용할 수 있는 스타일을 지정해서 다시 redraw 하는건?
그럴려면 마우스 오버한 개체를 지정할 수 있는 id역할을 하는 정보가 필요할듯 한데…
저처럼 이미 해 놓은 다른 맵들이 많은데. 어떻게 한 걸까요? ㅋㅋ 카카오맵이 아닌가? ㅋ
아무튼 답변 감사합니다.
좋은 아이디어 있으면 답변 좀 부탁 드리겠습니다.
확인해보니 클러스터러 내부가 CustomOverlay로 생성이 되어서 각 cluster 스타일 변경이 가능하네요.
cluster.getClusterMarker(); 를 호출하여 클러스터러 오버레이의 content를 수정하면 됩니다.
제가 아래 작성한 코드대로 div를 새로 생성하여 content를 재지정 또는 style을 변경하여 사용하시면 됩니다.
아래 코드도 참고해주세요.
var temp = null; // 기존 content를 담는 변수
kakao.maps.event.addListener( clusterer, 'clusterover', function( cluster ) { //클러스러터 마우스 오버 이벤트
temp = cluster.getClusterMarker().getContent();
// 변경하려는 div 선언
var content = "<div style='cursor: pointer; width: 52px; height: 52px; border-radius: 52px; border: 1px solid #1a86ae; background-color:white; line-height: 52px; font-size: 14px; text-align: center; font-weight: bold;'>"+cluster.getSize()+"</div>";
cluster.getClusterMarker().setContent(content);
});
kakao.maps.event.addListener( clusterer, 'clusterout', function( cluster ) { // 클러스터러 마우스 아웃 이벤트
// 마우스 아웃 시 기존 content로 변경
if(temp) {
cluster.getClusterMarker().setContent(content);
}
});너무 감사합니다. 다시 해 보겠습니다. 새해 복 많이 받으세요 ^^
1개의 좋아요
알려주신대로 작업을 하고 처리를 해 보니… 마우스 오버할때는 처리가 잘 되는데 마우스아웃 할때는 오류가 생기네요…
즉, 오버할때 적용한 스타일이 안 없어지고 새로 오버하는 애들만 오버하는 스타일이 계속 적용이되는 현상이 있습니다. 소스는 동일하게 적용 했습니다. 원인이 뭘까요?
마우스 아웃일 때 기존 스타일을 적용하면 되지 않나요?
네… 앞전에 제공해주신 소스대로 적용을 했는데… 마우스 오버해서 새 스타일 적용시키고 나면
setContent()
하고 나면… 어떤 이유에선지 이후 모든 스크립트가 실행이 안되네요.
------------------- 이하는 스크립트 입니다.
var temp_content = null; // 기존 content를 담는 변수
kakao.maps.event.addListener( clusterer, ‘clusterover’, function( cluster ) { //클러스러터 마우스 오버 이벤트
temp_content = cluster.getClusterMarker().getContent();
content_cluster = ‘
’+cluster.getSize()+’
’;cluster.getClusterMarker().setContent(content_cluster);
});
kakao.maps.event.addListener( clusterer, 'clusterout', function( cluster ) {
cluster.getClusterMarker().setContent(temp_content);
});
이렇게 사용중인데… 마우스 오버 후 스타일 변경되고. .아웃할때 원래 스타일을 적용해야 되는데… 적용이 안되구요…
다른 모든 스크립트 기능들도 멈추는 현상 입니다.
위 예제는 이벤트보다 스타일 적용에 대한 부분만 생각하다 보니
구현이 좀 잘못된 것 같습니다. 죄송합니다.
클러스터링이 끝나면 각 클러스터러 overlay에 이벤트를 추가하고
class를 적용하는 로직으로 다시 예제 만들어보았습니다.
참고 부탁드립니다.
// 클러스터링이 완료됐을 때 발생한다.
kakao.maps.event.addListener(clusterer, 'clustered', function(clusters ) {
for(var i=0; i<clusters.length; i++){
var cluster = clusters[i];
var overlay = cluster.getClusterMarker().getContent();
// 각 클러스터의 overlay에 mouseover 이벤트를 등록합니다.
overlay.addEventListener('mouseover', function() {
if(!this.classList.contains('div_over')) {
this.classList.add('div_over');
}
});
// 각 클러스터의 overlay에 mouseout 이벤트를 등록합니다.
overlay.addEventListener('mouseout', function() {
if(this.classList.contains('div_over')) {
this.classList.remove('div_over');
}
});
}
});몇번에 걸쳐서 보내주신 답변대로 진행을 하고 있습니다. 너무 감사하네요…
근데… 마지막에 제시해 주신 답변대로 처리를 했는데 테두리, 글자크기, 패딩 뭐 이런건 먹히는데
백그라운드 색깔이랑 글자 색깔은 적용이 안되네요…
제가 뭘 잘 못했던건지…
www.gongsilapp.com/main.php
여기서 좀 봐 주시고… 작업된 소스는 아래와 같습니다…
--------- style 부분 ------------------------------
.div_over{border:2px solid #3396ff;background-color:#000;display:inline-block;font-size:12pt;color:#3396ff;width:50px;z-index:999}
----------- script 부분 ---------------------------
///////// Clusterer 시작
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 1, // 클러스터 할 최소 지도 레벨
disableClickZoom : true,
calculator : [10, 20, 30, 40],
styles: [{ // calculator 각 사이 값 마다 적용될 스타일을 지정한다
width : ‘30px’, height : ‘30px’,
background: ‘rgba(51, 150, 255, .8)’,
borderRadius: ‘15px’,
color: ‘#fff’,
textAlign: ‘center’,
fontWeight: ‘bold’,
lineHeight: ‘31px’
},
{
width : ‘40px’, height : ‘40px’,
background: ‘rgba(51, 150, 255, .8)’,
borderRadius: ‘20px’,
color: ‘#fff’,
textAlign: ‘center’,
fontWeight: ‘bold’,
lineHeight: ‘41px’
},
{
width : ‘50px’, height : ‘50px’,
background: ‘rgba(51, 150, 255, .8)’,
borderRadius: ‘25px’,
color: ‘#fff’,
textAlign: ‘center’,
fontWeight: ‘bold’,
lineHeight: ‘51px’
},
{
width : ‘60px’, height : ‘60px’,
background: ‘rgba(51, 150, 255, .8)’,
borderRadius: ‘30px’,
color: ‘#fff’,
textAlign: ‘center’,
fontWeight: ‘bold’,
lineHeight: ‘61px’
}
]
});
$.get("<?=$json_file?>", function(data) {
d = JSON.stringify(data);
var c_markers = $(data.positions).map(function(i, position) {
return new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.lat, position.lng)
});
});
clusterer.addMarkers(c_markers);
});
var temp_content = null; // 기존 content를 담는 변수
kakao.maps.event.addListener( clusterer, 'clusterover', function( cluster ) {
temp_content = cluster.getClusterMarker().getContent();
new_content = "<div class='div_over'>" + cluster.getSize() + "</div>";
//cluster.getClusterMarker().setContent(new_content);
});
kakao.maps.event.addListener( clusterer, 'clusterout', function( cluster ) {
//alert(temp_content.innerHTML);
//cluster.getClusterMarker().setContent(temp_content);
});
kakao.maps.event.addListener(clusterer, “clustered”, function(clusters ) {
for(var i=0; i<clusters.length; i++)
{
var cluster = clusters[i];
var overlay = cluster.getClusterMarker().getContent();
// 각 클러스터의 overlay에 mouseover 이벤트를 등록합니다.
overlay.addEventListener(‘mouseover’, function() {
if(!this.classList.contains(‘div_over’)) {
this.classList.add(‘div_over’);
}
});
// 각 클러스터의 overlay에 mouseout 이벤트를 등록합니다.
overlay.addEventListener(‘mouseout’, function() {
if(this.classList.contains(‘div_over’)) {
this.classList.remove(‘div_over’);
}
});
}
});