여러개의 오버레이를 생성 후 마커를 hover했을 시 오버레이가 보이게 코드를 작성해봤습니다.
하지만 오버레이를 hide or fadeOut으로 처리 했을 경우 다시 오버레이를 보게 하기가 힘드네요.
개발자님들께 질문드립니다.
이미 닫기 기능이 가능한 오버레이를 참조해보았지만 해결이 안되어 글을 작성하게 되었습니다.
아래는 저의 코드입니다
content에서 마우스 out했을 경우 오버레이가 없어지고 다시 marker에 마우스가 hover했을 경우
오버레이가 생기게 하고 싶습니다.
$(data).find(‘item’).each(function(){ // xml 문서 item 기준으로 분리후 반복
var latitude = $(this).find(“latitude”).text();
var longitude = $(this).find(“longitude”).text();
// 위도와 경도를 읽어온 후 위치 잡기
var latlng = new daum.maps.LatLng(latitude, longitude)
var name = $(this).find("name").text();
var newAddr = $(this).find("newAddr").text();
var tel = $(this).find("tel").text();
// 마커를 생성합니다
var marker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: latlng // 마커를 표시할 위치
});
var content =
'<div class="card text-white bg-dark mb-3" style="position:relative; bottom:95px; max-width:21rem; max-height:10rem; font-size:0.9rem;" >'+
'<div class="removeBox" onclick="removeBox()" style="position:absolute; right:10px; top: 10px; cursor:pointer; font-size:20px;">X</div>'+
'<div class="card-body">'+
'<h6 class="card-title" style="font-size:1rem;">'+
name+
'</h6>'+
'<p class="card-text" style="font-size: 0.7rem;">'+
newAddr +
'</p>'+
'<p class="card-text">'+
tel +
'</p>'+
'</div>'+
'</div>'
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new daum.maps.CustomOverlay({
content: content,
position: latlng
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
daum.maps.event.addListener(marker, 'mouseover', function() {
overlay.setMap(map);
});
알려 주신 코드로 작성했을 경우,
오버레이가 바로 없어지는 현상이 나타납니다.(이름,전화번호,위치)가 나오는 곳 // div class=“card” 이하 부분
지금은 marker를 기준으로 mouserover mouseout을 하고 있습니다. 저는 아래 2가지 기능을 구현하고 싶습니다.
오버레이에서 mouseout이 됬을 경우 closeOverlay();
마커에게 mouseover가 됬을 경우 overlay.setMap(map);
지속적인 답변 정말 감사드립니다.
말씀해주신 대로 저의 말에 모순이 있었네요.
공유해 URL에 들어가서 참조해보았습니다.
그러면 오버레이마다 순번을 따로 만들어 각각에 이벤트를 걸어줘야 되는게 맞을까요?
추가적으로 이벤트를 줄 경우 overlay.setMap(null); 처럼 주면 되는게 맞을까요?
fadeOut()과 hide()함수는 적용해 보니 약간의 어색함이 있었습니다.
제가 첨부한 다음 지도 이미지처럼 X버튼을 누르면 오버레이가 삭제되고
마커를 클릭시 오버레이가 나오게 하고 싶습니다.
하나의 마커와 하나의 오버레이서는 잘 작동하지만 여러개의 오버레이와 마커가 생기니
잘 작동 되지 않습니다.
예제를 몇번 해보고 doji.doo님이 달아주신 글도 읽어 봤지만 잘 해결이 안되네요.
만약 데이터의 갯수가 많이 늘어날 경우의 문제입니다.
var overlays = [ ] // 빈 overlay배열을 선언 후
overlays.push(overlay)를 each문을 통해 오버레이의 갯수 만큼 넣어준 뒤 아래와 같은 코드를 구성하려고합니다.
Ex) overlay의 갯수가 50개이면 overlays.length = 50;
function removeBox(){
var overlay = overlays[37];
overlay.setMap(null);
}
함수를 하나하나 일일히 작성할 수 없기 떄문에 반복문으로 작성하려고 하는데 그 뒤로 방법을 잘 못찾겠습니다.
<div id="map" style="width:100%;height:350px;"></div>
<script>
// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
var infowindow = new daum.maps.InfoWindow({zIndex:1});
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 장소 검색 객체를 생성합니다
var ps = new daum.maps.services.Places();
// 키워드로 장소를 검색합니다
ps.keywordSearch('이태원 맛집', placesSearchCB);
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
if (status === daum.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
var bounds = new daum.maps.LatLngBounds();
for (var i=0; i<data.length; i++) {
displayMarker(data[i]);
bounds.extend(new daum.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: new daum.maps.LatLng(place.y, place.x)
});
var overlay = new daum.maps.CustomOverlay({
yAnchor: 3,
position: marker.getPosition()
});
var content = document.createElement('div');
content.innerHTML = place.place_name;
content.style.cssText = 'background: white; border: 1px solid black';
var closeBtn = document.createElement('button');
closeBtn.innerHTML = '닫기';
closeBtn.onclick = function () {
overlay.setMap(null);
};
content.appendChild(closeBtn);
overlay.setContent(content);
daum.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
}
</script>
반복문으로는 데이터를 순회하고 그 데이터로 뷰를 만드는 부분은 diaplayMarker()입니다.
displayMarker() 함수를 보시면 커스텀 오버레이의 content와 마커의 생성 및 이벤트 연결하는 방법이 나와 있습니다. 이 부분을 참고하세요.
많은 양의 데이터를 처리한 후 오버레이에 스타일과 클래스를 추가하고 싶습니다.
지금 jQuery를 사용 하고 있습니다. 2. 소스코드를 ==> 1.소스코드 처럼 간편하게 입력할 수 없을까요?
1.소스코드 처럼 했을 때는 content.appendChild()함수에 오류가 생기고 있습니다.
