지도 확대축소시 다각형 비율

안녕하세요

확대 축소 시 다각형(원)이 같이 작아지고 커지는데 이걸 고정시킬수있는지요…
원 안에 오버레이로 텍스트를 넣은건 css 고정값때문에 지도를 축소해도 괜찮은데…
radius : 1000으로 반지름을 주니 축소할때 같이 작아지더라구요…

안녕하세요,

지도 내에 표시하는 원의 radius 는 미터 단위의 값을 사용합니다.
따라서 지도 축척이 변경될 경우 그 축척에 맞게 사이즈도 변경이 되는 구조입니다.

담당 개발자분이 좀 더 정확한 건 확인해주시리라 생각하지만
일단 개발가이드 상에는 해당 크기를 고정하는 코드는 안보이긴 하는데요.

확대 축소 시에도 크기가 고정되는 원을 원하실 경우…
대안으로 해당 원을 이미지로 만드신 후 그걸 이미지마커로 올리는 형태로 사용해보시면 되지 않을까 싶습니다.

@doji.doo

아래 코드를 추가해 주세요.

daum.maps.event.addListener(map, 'zoom_changed', function() {
    var level = map.getLevel();
    circle.setRadius(Math.pow(2, level - 3) * 1000);
});
3개의 좋아요

만약 줌 애니메이션 중간에 줄어들거나 커지는 원을 보기 싫으시다면
아래처럼 이벤트(zoom_start)를 하나 더 추가하여 컨트롤 하면 됩니다.

daum.maps.event.addListener(map, 'zoom_start', function() {
	circle.setMap(null);
});
daum.maps.event.addListener(map, 'zoom_changed', function() {
    var level = map.getLevel();
    circle.setRadius(Math.pow(2, level - 3) * 1000);
    circle.setMap(map);
});
1개의 좋아요

doji.doo이 달아주신거 먼저 해보았으나 안돼서 이미지마커로 결국 했습니다!

그런데 한가지 더 문제가 생겼어요…

이미지마커 위에 오버레이로 텍스트를 넣었습니다. (금천구) 이런식으로 그런데 마커가 위에 있는것도있고 아래에 있는것도 있고 랜덤이네요… 오버레이를 무조건 맨위로 올리는 옵션이 따로 있나요??

마커나 텍스트 옵션에 zIndex 옵션을 한번 조정해보시면 되지 않을까요?

cc. @doji.doo

잘 동작하는 것을 확인하고 나서 코드를 적은건데 흠…
프로젝트에 적용시키기 어려운 무언가가 있었던 걸까요?

아무튼 관련 문제는 해결하셨다니 다행입니다.

추가 질문에 대한 것은
위 답변대로 zIndex를 조절하면 가능합니다.

http://apis.map.daum.net/web/documentation/#Marker
http://apis.map.daum.net/web/documentation/#CustomOverlay

두 객체 모두 생성 옵션에 zIndex 를 줄 수 있습니다.

1개의 좋아요

감사합니다!!