안녕하세요~ 카카오맵 api를 이용해서 컨텐츠를 만들고 있습니다.
몇가지 잘 안되는 부분이 있어서 이렇게 문의 드립니다.
- 클러스터러마커 생성시 커스텀오버레이 출력문의
일반 지도생성후 커스텀 오버레이 생성해서 출력하는 부분은 잘됩니다. 문제는 클러스터러마커 생성후 커스텀오버레이가 출력이 되지 않는데요 어떻게 해야 하는지 문의드립니다.
사용된 소스코드는 아래와 같습니다.
<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()});
});
// 마커를 생성합니다 이부분은 클러스터러마커 사용하지 않을때 주석제거
// 일반지도 마커와 클러스터러 마커가 중복되어 생성되며, 합쳐지지 않음
/*var marker = new kakao.maps.Marker({
position: markerPosition,
//image: markerImage // 마커의 이미지 사용시 주석제거
});*/
// 마커가 지도 위에 표시되도록 설정합니다
//marker.setMap(map);
// 커스텀 오버레이에 표시할 컨텐츠 입니다
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, 'click', function(clusterer) {
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);
</script>
- 검색폼에서 명칭이나 지역을 검색시 지도가 이동이 안되는데요 이부분은 어떠한 방식으로 처리를 해야 하는지요?
검색폼 소스입니다.
예를들어 서울 또는 대전 검색시 검색된 지역으로 이동이 안되고 초기 중심좌표로만 이동됩니다.
<form name="eyo_sch" id="eyo_sch" method="get" enctype="multipart/form-data" autocomplete="off">
<legend>검색</legend>
<input type="text" name="stx" value="<?php echo stripslashes($stx) ?>" class="input_text" maxlength="30" placeholder="지역명(시,군,동 등)을 검색해보세요" required />
<button type="submit" title="검색" id="search_btn" class="sch_btn"></button>
</form>
1주일 동안 이부분을 헤메고 있습니다. 도움 부탁드리겠습니다.
오늘도 좋은 하루 되세요…