카카오맵 인포윈도우 버튼 질문
본문
1. 인포윈도우 닫기버튼을 설정(removable : true) 했더니 자동으로 https://t1.daumcdn.net/localimg/localimages/07/mapjsapi/bt_close.gif 이미지 버튼이 나오는데 이미지를 수정하려고 하면 어떻게 해야 하나요? 이미지 경로를 수정하는 부분이 없네요
2. 인포윈도우에서 버튼을 클릭하면 모달팝업을 띄우려고 하는데 인포윈도우에서는 클릭이벤트 사용이 불가능한가요?
답변 3
다음과 같은 방법도 있으니 참고 하셔서 원하시는 형식으로 구현 하시면 되지 않을까 합니다.
인포윈도우 닫기 버튼 이미지 수정
CSS 스타일을 사용하여 이미지 대신 스타일로 닫기 버튼을 디자인합니다. 이렇게 하면 이미지를 수정하지 않고도 원하는 디자인을 적용할 수 있습니다.
.custom-close-button {
/* 원하는 스타일을 지정하세요 */
}
그리고 인포윈도우 옵션에 content 속성을 사용하여 사용자 정의 HTML을 추가하고 해당 HTML에 사용자 정의 스타일 클래스를 적용합니다.
const infowindow = new daum.maps.InfoWindow({
content: '<div class="custom-close-button">X</div>', // 사용자 정의 HTML 및 스타일 클래스
removable: true,
});
다른 이미지로 교체하려면 이미지를 직접 수정하고 그 이미지를 웹 서버에 호스팅한 다음, 해당 이미지를 인포윈도우 내에서 사용할 수 있습니다.
인포윈도우에서 버튼 클릭 이벤트 추가
예를 들어, 인포윈도우의 내용으로 사용자 정의 버튼을 추가하고 이 버튼에 클릭 이벤트를 등록하는 방법은 다음과 같이 하시면 될 것 같습니다.
const infowindow = new daum.maps.InfoWindow({
content: `
<div>
<p>내용 내용 내용</p>
<button id="customButton">클릭</button>
</div>
`,
removable: true,
});
// 사용자 정의 버튼에 클릭 이벤트 추가
const customButton = document.getElementById('customButton');
if (customButton) {
customButton.addEventListener('click', () => {
// 클릭 이벤트 처리 로직을 여기에 추가
// 모달 팝업을 띄우거나 다른 작업을 수행할 수 있습니다.
});
}
감사합니다. 사실 이 소스로 해결은 안됐는데 혹시 다른 분들은 참고하시라고 채택드립니다
인포윈도 콘텐트안에 사용하려는 이미지경로를 넣어서 이벤트를 걸어보세요. 맵문서보니 infowindow.close();로 닫히네요
var iwContent = '<div style="position:relative">Hello World! <img src="이미지경로" style="position:absolute;top:10px;right:10px" onclick="infowindow.close()" /> </div>',
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
position : iwPosition,
content : iwContent
});
답변 감사합니다. 근데 두번째 질문처럼 인포윈도우 내에서는 온클릭이벤트가 작동이 안되어서요. 이게 해결이 안돼서 원래 설정인 리무버블을 사용한 건데 이건 이미지 경로 수정이 안되네요..
혹시 비슷한 문제로 고민하시는 분들 계실까봐 추가합니다. 아래의 소스로 해결했습니다.
/*** 인포윈도우 close 이벤트 처리 ***/
$(document).on("click", ".mapwrap .close", function () {
infowindow[$(this).attr("c-index")].close();
});
/*** 인포윈도우 close 이벤트 처리 ***/
/*** modal 이벤트 처리 ***/
$(document).on("click", ".mapwrap .more", function () {
$("#popModal").show();
});
/*** modal close 이벤트 처리 ***/
// 마커에 표시할 인포윈도우를 생성합니다
infowindow[index] = new kakao.maps.InfoWindow({
content : '<div class="mapwrap"><div class="maptitle"><a href="/bbs/board.php?bo_table=store&wr_id='+val.wr_id+'" >'+val.wr_subject+'</a><a class="close" c-index="'+index+'"></a></div><div class="mapcon"><div class="mapellipsis">'+val.wr_4+' '+val.wr_6+'</div><a class="more">자세히보기</a></div></div>', // 인포윈도우에 표시할 내용
});
