안녕하세요.
마커와 오버레이를 사용하여 지도상에 출력하고 있고, 오버레이 같은 경우 마커에 클릭 이벤트를 등록하여
마커 클릭시 해당 마커에 대한 오버레이를 동적으로 생성하여 출력하고 있습니다.
다만, 지도상에 여러 개 마커가 존재하고,
각각의 마커를 클릭하면 이전에 출력된 오버레이는 자동으로 사라지고
현재 클릭된 마커에 대한 오버레이만 출력하고 싶습니다.
이럴 땐 어떤 방법으로 코드를 수정해야 하는지 조언 부탁드리겠습니다.
지금은 동적으로 생성된 오버레이에 “x” 버튼을 출력하여 “x” 버튼 클릭시 오버레이가 닫히는 식으로 개발을 진행하였습니다.
(참고 : 다중 마커 커스텀 오버레이 닫기 기능 문의)
아래 코드입니다.
$(function () {
$.ajax({
url: '[마커, 오버레이 정보를 가져올 URL]',
type: 'get',
dataType: 'json',
cache: false,
success: function (data) {
if (data !== undefined) {
var mapContainer = $('.VR_map')[0]; // 지도를 표시할 div
var mapOption = {
center: new kakao.maps.LatLng(35.855117, 127.144332), // 지도의 중심 좌표
level: 2 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도 생성
map.setMapTypeId(kakao.maps.MapTypeId.HYBRID); // 스카이뷰 설정
var positions = []; // 마커 정보
var overlaies = [] // 오버레이 정보
for (var i = 0; i < data.spot.length; i++) {
var spotObj = {
title: data.spot[i].title,
latlng: new kakao.maps.LatLng(data.spot[i].lat, data.spot[i].lng),
imageSrc: '/resource_zoo/img/content/VR/icon_marker' + data.spot[i].spoticon + '.png',
imageWith: 36,
imageHeight: 48
};
var overlayInfo = {
title: data.spot[i].title,
thumbnail: data.spot[i].thumbnail,
description: data.spot[i].description
}
positions.push(spotObj);
overlaies.push(overlayInfo);
}
for (var i = 0; i < positions.length; i++) {
var imageSize = new kakao.maps.Size(positions[i].imageWith, positions[i].imageHeight); // 마커 이미지 크기
var markerImage = new kakao.maps.MarkerImage(positions[i].imageSrc, imageSize); // 마커 이미지 생성
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title: positions[i].title, // 마커의 타이틀(마우스를 올리면 타이틀 표기)
image: markerImage // 마커 이미지
});
marker.setMap(map); // 마커 표기
// 마커 Click 이벤트 등록
kakao.maps.event.addListener(marker, 'click', makeOverlayListener(map, marker, overlaies[i]));
}
} else {
// console.log('출력할 VR 자료가 없습니다.');
}
},
error: function (request, status, error) {
// console.log(request.status, request.responseText, error);
}
});
});
function makeOverlayListener(map, marker, overlay) {
return function () {
// 커스텀 오버레이 생성
var customOverlay = new kakao.maps.CustomOverlay({
position:marker.getPosition(),
xAnchor: 0.0,
yAnchor: 0.5
});
var $content = $('<div></div>').addClass('spot_content');
var $thumbnail = $('<div></div>').addClass('img_area');
var $info = $('<div></div>').addClass('text_area');
var $title = $('<div></div>').addClass('tit');
var $close = $('<button type="button">x</button>');
// Button click 이벤트 등록
$close.on('click', function() {
customOverlay.setMap(null);
});
$thumbnail.append('<img src="' + overlay.thumbnail + '" alt="' + overlay.title + '"/>');
$title.append('<h4>' + overlay.title + '</h4>');
$title.append('<a href="" class="link">VR 보기</a>');
$info.append($title);
$info.append('<p>' + overlay.description + '</p>');
$content.append($thumbnail);
$content.append($info);
$content.append($close);
customOverlay.setContent($content[0]);
customOverlay.setMap(map);
}
}