휠로 줌 변경시 중심 고정

마우스 휠로 줌 변경시 지도의 중심을 고정한 상태로 만들고 싶습니다.

// 마우스 휠로 줌 변경시 지도 중심을 고정하는 함수입니다
daum.maps.event.addListener(map, ‘zoom_changed’, function () {

center = map.getCenter();

bounds.extend(center);

map.setBounds(bounds);

});

이렇게 하니까 기존 장소 중심점과 줌으로 변경한 중심점 두곳을 왔다갔다 무한 반복하면서 렉이 먹고 다른 기능이 먹통이 되버리네요…

‘zoom_changed’ 이벤트는 지도의 레벨이 변경 된 이후에 발생하기 때문에
해당 이벤트가 발생하고나서 다시 지도중심좌표와 레벨을 변경하면 아무래도 왔다갔다해 보일 수 밖에 없을것 같아요.

제 생각에는
지도는 마우스 휠로 지도 레벨이 변경이 안되도록
지도객체 생성시 scrollwheel 옵션을 false로 주거나(또는 지도객체 생성후 map.setZoomable(false) 호출)
지도 엘리먼트에 마우스 휠 이벤트를 걸어서 휠의 방향 (위, 또는 아래)에 따라
지도를 확대하거나 축소하도록 만들어야 할것같아요.

추가적으로
지도API에서 자동으로 마우스 휠로 확대, 축소 시에는 부드럽게 지도 레벨이 바뀌도록 애니메이션 효과가 있지만
그런 효과는 없이 뚝뚝 레벨만 바뀌게 보이기 때문에
map.setLevel의 옵션에 animate:true을 주면 똑같은 효과를 줄수 있어요.
map.setLevel는 기본적으로 지도중심을 기준으로 레벨이바뀌기 때문에 지도 중심값을 구해올 필요도 없구요.
http://apis.map.daum.net/web/documentation/#Map_setLevel

이 방법이 어려우시면 지도는 마우스 휠로 지도 레벨이 변경이 안되도록 생성하고
커스텀 버튼으로만 확대, 축소가 되게 하는 방법도 생각해 볼수도 있겠네요.

1개의 좋아요