[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
지도위에 new kakao.maps.Marker 로 이미지를 넣어서 마컬를 표시하고 있는데 이 마커를 웹접근성을 위한 tabindex 적용이 가능한가요?? 개발자도구에서는 img 태그안에 tabindex를 넣어서 수정하면 포커스는 가는데 addListener에서 이벤트 타입을 keydown 으로 해도 엔터키를 눌렀을때 이벤트가 안먹히네요
직접 스타일과 속성을 제어할 수 있는 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
});
감사합니다 알려주신대로 해보겠습니다~!!
1개의 좋아요
잘 해결했습니다 감사합니다!
1개의 좋아요