CustomOverlay 질문입니다

안녕하세요^^

http://apis.map.daum.net/web/sample/customOverlay1/

customOverlay 를 이용하여 마커를 지도에 표시하고 있는데
지도를 Zoom 할때마다 해당 위치에 고정되지 않고 이동을 많이 하네요

다른 마커는 zoom 이용해도 이동하지 않고 제위치에 잘 표시하더라구요

customOverlay를 zoom 영향 안받게 할 수 있을까요~??

커스텀오버레이 내부 content에 CSS로 style이 적용된 상태일 가능성이 큰데요.

고정되지 않는다고 생각되는 이유는
오버레이가 위치를 잡는 방식이
[지도상에서의 커스텀오버레이 위치] + [그 위치를 기준으로 CSS로 이동시킨 픽셀] 이기 때문입니다.

[지도상에서의 커스텀오버레이 위치]는 지도 좌표계에 고정되어 있지만
[CSS로 이동시킨 픽셀] 은 스크린상으로 고정된 수치이기 때문에
확대된 레벨에서는 비교적 원 위치와 많이 가까이 있는 것처럼 보이지만
축소된 레벨에서는 1px이 지도상에서 수km일 것이므로 많이 어긋나는 것 처럼 보이는 것이죠.

링크로 남겨주신 예제에서도
원래 위치는 이렇지만
image

줌아웃 하면 실제 위치와 많이 떨어져 보이죠.
image

하지만
[직접해보기]의 CSS탭에
.label {margin-bottom: 96px;} <== 이 부분을 지우면
줌레벨이 변경되어도 원위치에 잘 붙어서 그려질거에요.
image

이는 버그가 아니며 지도위에 올라가는 오버레이의 특성상 필요한 기능입니다.

이를 이해하시면 해결하실 수 있을 거에요.

그러면…
content 부분에 아래와 같이 html 을 이용하고 있는데

아무리 봐도 수정할 내용은 안보입니다ㅜ

해결책을 알 수 있을까요 ??

가장 밖의 div의 인라인 스타일 중, position: absolute; 를 지워주세요.
(absolute 포지션을 가진 content가 설정되면 API 내부에서 width/height size를 제대로 잡지 못합니다.)

이 상태라면 태그로 잡은 모양이 지도 좌표의 정 중앙에 위치하게 될 겁니다.

태그 모양 자체가 하단 중앙에 꼬리가 있는 마커모양이니
yAnchor를 1로 줘서 위치를 올려주셔야 합니다.

var customOverlay = new daum.maps.CustomOverlay({
    position: position,
    content: content,
    yAnchor: 1
});

P.S. 혹시나 다음 질문에서 코드를 첨부하실땐
코드를 전체 블락 선택하고
image
저 버튼을 꼭 눌러주세요.
그렇지 않으면 코드 가독성이 떨어지거나
일부 HTML Tag들은 아예 보이지 않습니다.