지도위 마커 tabindex 적용

지도/로컬 API
1

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

지도위에 new kakao.maps.Marker 로 이미지를 넣어서 마컬를 표시하고 있는데 이 마커를 웹접근성을 위한 tabindex 적용이 가능한가요?? 개발자도구에서는 img 태그안에 tabindex를 넣어서 수정하면 포커스는 가는데 addListener에서 이벤트 타입을 keydown 으로 해도 엔터키를 눌렀을때 이벤트가 안먹히네요

2

직접 스타일과 속성을 제어할 수 있는 CustomOverlay로 마커를 생성해서 필요한 속성들을 적용해주세요.
단, 커스텀 오버레이를 사용할 경우 생성한 dom에 직접 이벤트를 등록해주셔야 합니다.

const img = document.createElement('img');
img.setAttribute('tabindex', '0');
img.setAttribute('alt', 'marker');
img.setAttribute('src', 'https://t1.daumcdn.net/mapjsapi/images/2x/marker.png');
img.setAttribute('style', 'width:29px;height:42px');

//클릭 이벤트 등록
img.onclick = function() {
    console.log('click!');
}

//CustomOverlay option에 대한 내용은 문서 참고해주세요.
//https://apis.map.kakao.com/web/documentation/#CustomOverlay
const overlay = new kakao.maps.CustomOverlay({
    map: map,
    clickable: true, // 커스텀 오버레이 클릭 시 지도 이벤트를 막아줍니다.
    content: img,
    position: new kakao.maps.LatLng(33.450701, 126.570667),
    yAnchor: 0.9
});
3

감사합니다 알려주신대로 해보겠습니다~!!

1개의 좋아요
4

잘 해결했습니다 감사합니다!

1개의 좋아요