현재 마커에 인포 윈도우를 띄워 정보를 보이게끔 사용하고 있는데,
기존에는 mouseover, mouseout 기능을 사용했는데, 지금은 클릭하면 인포윈도우가 켜지게끔 하고 있습니다.
그런데 이 인포윈도우를 마커를 재클릭했을때 닫게하고 싶은데, 닫기 열기 함수가 있어도 클릭이벤트를 동시에 두개를 쓰면
클릭함과 동시에 켜지고 꺼져 결국 인포윈도우가 표출이 안됩니다.
초기 클릭시 : 인포윈도우 켜짐 -> 2번째 클릭 : 꺼짐 -> 3번째 클릭 : 켜짐 이런식으로 구현하고 싶은데
어떤식으로 해야할까요?
열린 인포윈도우를 관리하는 변수를 생성해주세요.
클릭 이벤트에서 변수에 담긴 값에 인포윈도우가 포함되어 있는지 체크해주세요.
포함되어 있다면 이미 열려있는 인포윈도우로 닫아주고 변수에서 삭제,
포함되어 있지 않다면 인포윈도우를 열어주고 변수에 값을 추가해주세요.
말씀하신 부분이 변수에 윈포윈도우 객체를 담으라는 말씀이신가요?
그래서 동시에 두개 (변수, 원래 인포윈도우)를 두개 운용하라는 말씀이시죠?
네, 열린 인포윈도우를 변수에 담아 관리해주세요.
변수에 인포윈도우가 들어가 있으면 이미 열려있는 인포윈도우로
다시 클릭이 되었을 때는 인포윈도우를 닫아주고, 배열에서 삭제해주세요.
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커의 위치
clickable: true,
image: markerImage
});
var iwRemoveable = true;
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content,
removable : iwRemoveable// 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
//kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
//kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'rightclick', makeOutListener(infowindow));
kakao.maps.event.addListener(marker, 'click', makeOverListener(map, marker, infowindow))
// 생성된 마커를 배열에 추가합니다
markers.push(marker);
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
현재 위에 처럼 사용중입니다. 저 상태에서 어떻게 진행해야 할까요…
제가 대신 코드를 작성해드리지 않습니다.
아래 내용 참고해서 구현해주세요.
배열 함수인 indexOf, includes, splice,… 를 사용해서 로직을 구현할 수 있습니다.