안녕하세요^^
http://apis.map.daum.net/web/sample/customOverlay1/
customOverlay 를 이용하여 마커를 지도에 표시하고 있는데
지도를 Zoom 할때마다 해당 위치에 고정되지 않고 이동을 많이 하네요
다른 마커는 zoom 이용해도 이동하지 않고 제위치에 잘 표시하더라구요
customOverlay를 zoom 영향 안받게 할 수 있을까요~??
안녕하세요^^
http://apis.map.daum.net/web/sample/customOverlay1/
customOverlay 를 이용하여 마커를 지도에 표시하고 있는데
지도를 Zoom 할때마다 해당 위치에 고정되지 않고 이동을 많이 하네요
다른 마커는 zoom 이용해도 이동하지 않고 제위치에 잘 표시하더라구요
customOverlay를 zoom 영향 안받게 할 수 있을까요~??
커스텀오버레이 내부 content에 CSS로 style이 적용된 상태일 가능성이 큰데요.
고정되지 않는다고 생각되는 이유는
오버레이가 위치를 잡는 방식이
[지도상에서의 커스텀오버레이 위치] + [그 위치를 기준으로 CSS로 이동시킨 픽셀] 이기 때문입니다.
[지도상에서의 커스텀오버레이 위치]는 지도 좌표계에 고정되어 있지만
[CSS로 이동시킨 픽셀] 은 스크린상으로 고정된 수치이기 때문에
확대된 레벨에서는 비교적 원 위치와 많이 가까이 있는 것처럼 보이지만
축소된 레벨에서는 1px이 지도상에서 수km일 것이므로 많이 어긋나는 것 처럼 보이는 것이죠.
링크로 남겨주신 예제에서도
원래 위치는 이렇지만
줌아웃 하면 실제 위치와 많이 떨어져 보이죠.
하지만
[직접해보기]의 CSS탭에
.label {margin-bottom: 96px;} <== 이 부분을 지우면
줌레벨이 변경되어도 원위치에 잘 붙어서 그려질거에요.
이는 버그가 아니며 지도위에 올라가는 오버레이의 특성상 필요한 기능입니다.
이를 이해하시면 해결하실 수 있을 거에요.
그러면…
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. 혹시나 다음 질문에서 코드를 첨부하실땐
코드를 전체 블락 선택하고
저 버튼을 꼭 눌러주세요.
그렇지 않으면 코드 가독성이 떨어지거나
일부 HTML Tag들은 아예 보이지 않습니다.