모바일 웹에서 마커 터치 이벤트 관련 문의입니다

지도/로컬 API
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

현재 등산로 관련 공공데이터를 받아와 마커를 생성하고,마우스를 마커에 올렸을 경우 마커의 정보를 인포윈도우에 출력하고자 합니다.
데스크톱 환경에서는 mouseover, mouseout 이벤트 리스너를 활용해 제가 원했던 동작이 제대로 동작을 하는 것을 알 수 있었습니다. 하지만 모바일 환경으로 바꾸니, mouseover, mouseout 이벤트 리스너가 제대로 동작하지 않아 이벤트 리스너를 touchstart 를 사용해 모바일 환경에서 구현하고자 합니다.

if (window.matchMedia("(min-width: 760px)").matches) {
kakao.maps.event.addListener(marker, “mouseover”, function () {
infowindow.open(map, marker);
});
kakao.maps.event.addListener(marker, “mouseout”, function () {
infowindow.close();
});
} else {
// 모바일에 대한 코드
// 터치 스타트 이벤트 처리
kakao.maps.event.addListener(marker, “touchstart”, function () {
infowindow.open(map, marker);
});
kakao.maps.event.addListener(marker, “touchend”, function () {
infowindow.close();
});
}

이러한 방식으로 코드를 작성했는데, 작동이 되지 않습니다.
https://devtalk.kakao.com/t/map-api-mobile-touchstart/108718
위 링크를 확인해봤는데
“터치 이벤트 경우 dom에 직접 등록하면 사용할 수 있습니다.
커스텀 오버레이로 마커를 생성하고 content에 터치 이벤트를 등록해주세요.”

이 부분을 어떻게 해결해야할지 모르겠습니다.

2

마커는 문서에서 제공하고 있는 이벤트만 지원하고 있기 때문에
제공하는 이벤트 이외의 다른 이벤트를 사용하려면
Marker가 아닌 CustomOverlay를 이용해서 마커를 표시할 수 있습니다.
https://apis.map.kakao.com/web/documentation/#CustomOverlay
아래 코드 참고해주세요.

그리고 infowindow.open의 2번째 파라미터는 marker객체만 받을 수 있기 때문에
CustomOverlay를 사용할 경우 인포윈도우가 overlay위에 뜰 수 있게 좌표를 조정해야 합니다.

<style>
.marker {
    display: block;
    width: 29px;
    height: 42px;
}
</style>

let img = document.createElement('img');
img.className = 'marker';
img.src = 'https://t1.daumcdn.net/mapjsapi/images/2x/marker.png';

var overlay = new kakao.maps.CustomOverlay({
    clickable: true,
    content: img,
    position: position,
    map: map,
    yAnchor: 1
});

img.addEventListener('touchstart', () => {
    infowindow.open(map);
});

img.addEventListener('touchend', () => {
    infowindow.close();
});
3

답변 감사합니다. 혹시 제공되는 이벤트가 어떤 것들이 있는지 알 수 있을까요?

4

아래 문서 참고해주세요.
https://apis.map.kakao.com/web/documentation/#Marker_Events