커스텀 오버레이를 이용하여 마커에 마우스를 올려두면 해당 마커에 해당하는 커스텀 오버레이가 나오도록
하였는데요
문제는 사진과 같이 커스텀 오버레이에 있는 홈페이지를 클릭하려하면 마커에 마우스아웃 이벤트를 걸었기에 오버레이가 닫혀버립니다
이걸 커스텀 오버레이에 마우스가 가도 마우스오버가 유지되게 할 수 있을까요?
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var spot = ${spot};
var spotList = [];
var res = ${res};
var resList = [];
var hotel = ${hotel};
var hotelList = [];
// spot 마커가 표시될 좌표 배열입니다
for (var i in spot) {
var spotContent =
'<div class="wrap">' +
' <div class="info">' +
' <div class="title">' + spot[i].sname +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="${conPath}/spotImgFileUpload/' + spot[i].smainimg + '"width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">'+spot[i].saddr +'</div>' +
' <div><a href="'+ spot[i].slink +'" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
spotList.push({
title: spot[i].sname,
content: spotContent,
latlng: new kakao.maps.LatLng(spot[i].slatitude, spot[i].slongitude)
})
};
// res 마커가 표시될 좌표 배열입니다
for (var i in res) {
resList.push({
content: res[i].rname,
latlng: new kakao.maps.LatLng(res[i].rlatitude, res[i].rlongitude)
})
};
// hotel 마커가 표시될 좌표 배열입니다
for (var i in hotel) {
hotelList.push({
content: hotel[i].hname,
latlng: new kakao.maps.LatLng(hotel[i].hlatitude, hotel[i].hlongitude)
})
};
var markerImageSrc = '../icon/sprite.png'; // 마커이미지의 주소입니다. 스프라이트 이미지 입니다
spotMarkers = [], // spot 마커 객체를 가지고 있을 배열입니다
resMarkers = [], // res 마커 객체를 가지고 있을 배열입니다
hotelMarkers = []; // hotel 마커 객체를 가지고 있을 배열입니다
createSpotMarkers(); // spot 마커를 생성하고 spot 마커 배열에 추가합니다
createResMarkers(); // res 마커를 생성하고 res 마커 배열에 추가합니다
createHotelMarkers(); // hotel 마커를 생성하고 hotel 마커 배열에 추가합니다
changeMarker('spot'); // 지도에 spot 마커가 보이도록 설정합니다
// 마커이미지의 주소와, 크기, 옵션으로 마커 이미지를 생성하여 리턴하는 함수입니다
function createMarkerImage(src, size, options) {
var markerImage = new kakao.maps.MarkerImage(src, size, options);
return markerImage;
}
// 좌표와 마커이미지를 받아 마커를 생성하여 리턴하는 함수입니다
function createMarker(position, image) {
var marker = new kakao.maps.Marker({
position: position,
image: image
});
return marker;
}
// spot 마커를 생성하고 spot 마커 배열에 추가하는 함수입니다
function createSpotMarkers() {
for (var i = 0; i < spotList.length; i++) {
var imageSize = new kakao.maps.Size(35, 33),
imageOptions = {
spriteOrigin: new kakao.maps.Point(0, 66),
spriteSize: new kakao.maps.Size(36, 98)
};
// 마커이미지와 마커를 생성합니다
var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),
spotMarker = createMarker(spotList[i].latlng, markerImage)
// 생성된 마커를 spot 마커 배열에 추가합니다
spotMarkers.push(spotMarker);
// 커스텀 오버레이 생성
var overlay = new kakao.maps.CustomOverlay({
content: spotList[i].content,
map: map,
position: spotList[i].latlng
});
// 지도 onload시 커스텀 오버레이 비활성화
overlay.setMap(null);
// 커스텀 오버레이 활성화
kakao.maps.event.addListener(spotMarker, 'mouseover', makeOpenListener(map, overlay));
kakao.maps.event.addListener(spotMarker, 'mouseout', makeCLoseListener(overlay));
}
}
// spot 커스텀 오버레이를 표시하는 클로저를 만드는 함수입니다
function makeOpenListener(map, overlay) {
return function() {
overlay.setMap(map);
};
}
// spot 커스텀 오버레이를 닫는 클로저를 만드는 함수입니다
function makeCLoseListener(overlay) {
return function() {
overlay.setMap(null);
};
}
// spot 마커들의 지도 표시 여부를 설정하는 함수입니다
function setSpotMarkers(map) {
for (var i = 0; i < spotMarkers.length; i++) {
spotMarkers[i].setMap(map);
}
}