카카오맵 커스텀오버레이 문의

지도/로컬 API
#1

웹버전 자바스크립트로 마커 클릭시 커스텀오버레이를 띄우고 있는데요. 현재 지도의 마커가 지도 가장자리에 있을 경우 커스텀오버레이가 일부분 지도밖으로 가려지는데, 오버레이가 모두 나올수 있도록 위치 보정은 어떻게 하는지요?

#2

커스텀 오버레이의 xAnchor, yAnchor 속성을 사용해서 위치를 조정해주세요.
http://apis.map.kakao.com/web/documentation/#CustomOverlay
http://apis.map.kakao.com/web/sample/customOverlay2/

#3

여러개의 마커가 띄어져 있는 상태라서 말씀하신 x,y값을 특정할수 없는 상태입니다.
사이드에 있는 마커들의 포지션에 따라 커스텀레이아웃이 가려지는 부분이 제각각 달라서요.

#4

https://map.kakao.com/ 에 구현되어 있는 방식을 보면
마커나 지도 위의 텍스트를 클릭시 커스텀 오버레이를 노출시킬 때
화면에 모두 들어오도록 지도 중심 좌표를 이동해 주고 있습니다.

이 기능을 구현하기 위해서는
먼저 지도 영역의 레이아웃 크기(map_width, map_height)를 알아야 합니다.

// width, height는 다른 방식으로 구해도 상관 없습니다.
var box = map.getNode().getBoundingClientRect();
var map_width = box.width,
    map_height = box.height;

마커 클릭시
커스텀 오버레이의 컨텐츠를 가져와서
https://apis.map.kakao.com/web/documentation/#CustomOverlay_getContent
컨텐츠의 레이아웃 사이즈(content_width, content_height)를 구하고

마커의 위치가 화면 픽셀상 어디에 위치해 있는지 확인한 뒤,
https://apis.map.kakao.com/web/documentation/#MapProjection_containerPointFromCoords

이 픽셀 위치와
지도 전체 사이즈(map_width, map_height),
그리고 컨텐츠의 사이즈(content_width, content_height)를 가지고
얼마나 이동해야 할 지(dx, dy)를 구합니다.
그리고 Map.panBy(dx, dy) 함수로 이동시키면 됩니다.
https://apis.map.kakao.com/web/documentation/#Map_panBy

1개의 좋아요