[ 언어·프레임워크/HTML·CSS ]
[CSS] 카카오 지도 커스텀-오버레이-마커의 앵커에 위경도 좌표 위치 시키기
2024-02-19 15:39:39
1. 커스텀-오버레이-마커의 앵커와 위경도 좌표 불일치 서버로부터 오는 데이터에 따라 컬러, 애니메이션 등 스타일이 변경 적용되는 마커를 만들어야 하는 상황이었다. 카카오 지도 API에서는 HTML, CSS, JavaScript를 이용해 커스텀하게 마커를 만들 수 있는데 이것을 커스텀 오버레이라고 부르고 있다. 이 글에서는 커스텀한 마커를 만들고 마커 아래에 있는 뾰족한 부분, 즉 앵커에 위경도 좌표가 정확하게 위치하도록 하는 방법에 대해 다룬다. 2. 커스텀-오버레이-마커 만들기 1) 카카오 지도 마커와 div 요소 지도에 찍기 [그림 1]과 같이 카카오 지도의 특정 위경도에 카카오 지도 마커와 커스텀-오버레이-마커로 만들 div 요소를 찍었다. 카카오 지도 마커의 경우 앵커 부분이 지정한 위경도에 위..