인포윈도우 마우스 이벤트 & 클릭 이벤트

지도/로컬 API
#1

키워드로 검색하고 목록으로 표출하기 카카오 api 문서를 참고하여 react로 쓰는 중인데 마우스 이벤트와 클릭 이벤트를 동시에 넣을 수도 있나요?? 둘 다 썼을 때 작동되지 않는 것 같아 문의합니다. useEffect 안에 아래와 같이 쓰면 되지 않을까 했는데 되지 않습니다.ㅠㅠ

    window.kakao.maps.event.addListener(marker, 'mouseover', function () {
      infoWindow.open(map, marker);
    });

    window.kakao.maps.event.addListener(marker, 'mouseout', function () {
      infoWindow.close();
    });

    window.kakao.maps.event.addListener(marker, 'click', function () {
      infoWindow.open(map, marker);
    });
1개의 좋아요
#2

이벤트 콜백 함수에서 클로저 함수로 인포윈도우를 표시 또는 닫기를 해주세요.
https://apis.map.kakao.com/web/sample/multipleMarkerEvent/

kakao.maps.event.addListener(marker, 'mouseover', function () {
    return function() {
        infowindow.open(kakaoMap, marker);
    };
}(kakaoMap, marker, infowindow));

kakao.maps.event.addListener(marker, 'mouseout', function () {
    return function() {
        infowindow.close();
    };
}(infowindow));
1개의 좋아요
#3

클로저 함수로 다시 썼지만 마우스 올렸을 때 인포윈도우는 뜨고 클릭했을 때는 안 떠요ㅠㅠ 혹시 몰라 인포윈도우 클릭도 클로저 함수 형태로 써봤습니다.

#4

mouseover 이벤트와 동일한 클로저 함수로
클릭 이벤트를 등록하면 인포윈도우가 표시됩니다.

각 이벤트 핸들러에 로그를 찍어보면
mouseover, mouseout, click 이벤트 동작을 확인할 수 있습니다.
mouseout 이벤트로 인해 인포윈도우가 닫힌 건 아닌지 확인해주세요.

그래도 동작하지 않는다면 현상을 확인할 수 있는 코드 첨부해주세요.

#5

css를 하다보니 오버레이가 편할 것 같아 오버레이로 코드를 수정했습니다. 그런데 작동하는 것을 보니 mouseover, mouseout이 실행되고 click은 안 되는 것처럼 보였습니다. 제 생각에는 클릭을 해도 mouseout이 작동해서 고정이 되지 않는 것 같은데 클릭을 했을 때 마우스아웃이 적용이 안 되도록 할 방법이 있을까요…??
아래는 코드이고 content에 넣은 container에 대한 코드는 길어서 첨부하지 않았습니다!

    const overlay = new window.kakao.maps.CustomOverlay({
      content: container,
      // map: map,
      position: latLng,
    });

    window.kakao.maps.event.addListener(marker, 'mouseover', function () {
      overlay.setMap(map);
    });

    window.kakao.maps.event.addListener(marker, 'mouseout', function () {
      overlay.setMap(null);
    });

    window.kakao.maps.event.addListener(marker, 'click', function () {
      overlay.setMap(map);
    });
#6

먼저 마커의 클릭 여부를 확인할 수 있는 변수를 생성해주세요.
click 이벤트 핸들러에서는 변수값을 할당
mouseout 이벤트 핸들러에서는 변수값이 클릭된 상태라면 값 초기화,
클릭된 상태가 아니라면 지도에서 오버레이를 삭제해주세요.

#7

답변 감사합니다!!

useState를 사용하고 있어 초기값으로 false 설정해서 변수 설정했습니다. mouseout 이벤트에서 나누는 것도 이해했는데 값 초기화를 이렇게 하는게 아닐까요…? 여전히 클릭했을 떄 고정이 되지 않아 질문합니다.

const [isClicked, setIsClicked] = useState(false);

변수는 이렇게 설정했습니다.

    window.kakao.maps.event.addListener(marker, 'mouseover', function () {
      overlay.setMap(map);
    });

    window.kakao.maps.event.addListener(marker, 'mouseout', function () {
      if (isClicked === true) {
        setIsClicked();
      } else if (isClicked === false) {
        overlay.setMap(null);
      }
    });

    window.kakao.maps.event.addListener(marker, 'click', function () {
      setIsClicked(true);
      overlay.setMap(map);
    });
#8

mouseout 이벤트에서 값을 false로 준 다음 setMap이 실행되지 않도록 조건문을 종료시켜주세요.
제가 안내 드린 방법은 참고로만 봐주시고,
click 변수의 초기화 시점은 구현을 원하는 방향에 따라 적용해주세요.

window.kakao.maps.event.addListener(marker, 'mouseout', function () {
  if (isClicked) { // isClicked = true인 경우
    setIsClicked(false); // false로 초기화
    return; // 종료
  } 

  // isClicked = true인 경우, 지도에서 삭제
   overlay.setMap(null); 
});
#9

코드 수정을 했는데 여전히 클릭했을 때 고정되지 않고 마우스아웃 되어 버립니다ㅠㅠ 뭐가 문젠지 확인해보려고 콘솔도 찍어봤는데 상태로 저장이 안 되고 있는 건가 싶기도 하고…왜 조건문에 따라 나뉘지 않고 마우스 아웃 이벤트가 실행되는 건지 모르겠습니다.

    window.kakao.maps.event.addListener(marker, 'click', function () {
      setIsClicked(true);
      overlay.setMap(map);
      console.log('isClicked true로 변경');
    });

    window.kakao.maps.event.addListener(marker, 'mouseover', function () {
      overlay.setMap(map);
    });

    window.kakao.maps.event.addListener(marker, 'mouseout', function () {
      if (isClicked) {
        console.log('isClicked true, mouseout 안 함');
        setIsClicked(false);
        return;
      }
      overlay.setMap(null);
      console.log('isClicked false, mouseout 함');
    });
#10

상태 변수가 아닌 내부 변수로 관리해주시고
제가 안내드린 설명은 click -> mouseout (변수 값 초기화)로
다시 mouseover 또는 mouseout을 하면 지도에서 보여지고 사라지게 됩니다.

초기화 시점은 구현하고 싶은 방향에 맞게 변경해주시면 됩니다.
아래 유사 게시글 답변도 참고해서 구현해주세요.

#11

내부 변수로 관리하니까 잘 되네요!! 감사합니다ㅠㅠ 덕분에 잘 해결했어요!!

1개의 좋아요