안녕하세요!
카카오맵 API로 구현하고자 하는 페이지에 적용하려고 하는데 잘 안되는 부분이 있어서 이렇게 문의 드립니다.
마커클러스터는 예제를 보면서 구현은 잘 되었습니다.
커스텀오버레이도 예제를 보면서 구현이 되어 있습니다.
개별적으로 적용을 할때는 잘 되는데 마커클러스터랑 함께 사용할때는 잘 안되더라구요…ㅠㅠ
- 클러스터 이벤트
kakao.maps.event.addListener( clusterer, ‘clusterclick’, function( cluster ) 적용후 클러스터 클릭스 오버레이가 한번에 다 띄워짐 단, 마커클릭시에는 오버레이가 뜨지 않음
띄워진 오버레이는 정상적으로 닫힘
- kakao.maps.event.addListener(marker, ‘click’, function() 적용후 마커클릭시 오버레이 뜨지않음
원하는 구현방식은 마커클러스터 클릭시에는 줌인되어서 마커가 보이고, 마커클릭시에는 오버레이가 뜨게 하려고 합니다.
커스텀 오버레이 부분은 php로 for문에서 반복 수행하도록 처리 했습니다.
고수님들의 도움 부탁드리겠습니다.
초보자이므로 쉽게 설명을 해주시면 감사하겠습니다.
좋은 하루 되세요~
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(<?php echo $lat ?>, <?php echo $lng ?>), // 지도의 중심좌표
level: 6 // 지도 초기 확대레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커 클러스터러를 생성합니다
// 마커 클러스터러를 생성할 때 disableClickZoom 값을 true로 지정하지 않은 경우
// 클러스터 마커를 클릭했을 때 클러스터 객체가 포함하는 마커들이 모두 잘 보이도록 지도의 레벨과 영역을 변경합니다
// 이 예제에서는 disableClickZoom 값을 true로 설정하여 기본 클릭 동작을 막고
// 클러스터 마커를 클릭했을 때 클릭된 클러스터 마커의 위치를 기준으로 지도를 1레벨씩 확대합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 4, // 클러스터 할 최소 지도 레벨
disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
});
// 데이터를 가져오기 위해 jQuery를 사용합니다
// 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
$.get("/wm_include/main_map/data.json", function(data) {
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
var markers = $(data.positions).map(function(i, position) {
return new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.lat, position.lng)
});
});
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
});
// 마커 클러스터러에 클릭이벤트를 등록합니다
// 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우
// 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다
kakao.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {
// 현재 지도 레벨에서 1레벨 확대한 레벨
var level = map.getLevel()-1;
// 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
map.setLevel(level, {anchor: cluster.getCenter()});
});
<?php
$gu = str_replace("/","",$_GET['gubun']);
if($_GET['gubun']=="") {
$sql = " select * from g5_write_".$bo_table." order by wr_id asc ";
} else {
$sql = " select * from g5_write_".$bo_table." where ca_name='".$gu."' order by wr_id asc ";
}
$result = sql_query($sql);
$cnt = 0;
while ($row = sql_fetch_array($result)) {
if($row['wr_5'] && $row['wr_6']) {
$thumb = get_list_thumbnail($board['bo_table'], $row['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
if($thumb['src']) {
$img_content = $thumb['src'];
}
?>
// 커스텀 오버레이에 표시할 컨텐츠 입니다
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' <?php echo $row['wr_subject']; ?>' +
' <div class="close" onclick="closeOverlay_<?php echo $row['wr_id'] ?>()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <?php if($thumb['src']) { ?><img src="<?php echo $img_content ?>" width="75" height="73">' +
' <?php } ?>' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis"><?php echo $row['wr_3']; ?></div>' +
' <div class="jibun ellipsis"><?php echo $row['wr_4']; ?></div>' +
' <div><a href="<?php echo $row['wr_link1']; ?>" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 마커 위에 커스텀오버레이를 표시합니다
var position = new kakao.maps.LatLng(<?php echo $row['wr_5'] ?>, <?php echo $row['wr_6'] ?>);
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay_<?php echo $row['wr_id'] ?> = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: position,
yAnchor: 1
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener( clusterer, 'clusterclick', function( cluster ) {
overlay_<?php echo $row['wr_id'] ?>.setMap(map);
});
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay_<?php echo $row['wr_id'] ?>() {
overlay_<?php echo $row['wr_id'] ?>.setMap(null);
}
overlay_<?php echo $row['wr_id'] ?>.setMap(null);
<?php
$cnt++;
}
}
?>
</script>