지도의 중심좌표를 유지하면서 확대축소를 하고 싶어요

카카오맵 API (지도/로컬)
1

제목처럼 하고 싶은데,
지도이동과 확대축소가 동시에 이뤄지니 중심좌표가 변경이 되는 문제가 있어서 문의드립니다.
PC에서 마우스 휠로 확대축소시에는 마커위치가 아닌 다른 위치에서 확대축소시 중심좌표가 아닌 마우스포인터의 위치에서 확대축소가 되는데, 마우스포인트를 어디에 두고 휠로 확대축소하더라도 표시해준 마커의 중심좌표를 유지하고 싶어요.

마커로 표시해 둔 중심좌표를 유지하면서 확대축소가 되게 하려면 어떻게 해야 하는지요?

ps.카카오T 앱 퀵/택배메뉴의 도착지선택화면의 지도선택기능 처럼 구현하려고 하는것입니다.

2

커스텀 버튼을 이용해서 지도를 확대/축소하는 방법과
지도 엘리먼트에 직접 wheel 이벤트를 등록해서 확대/축소를 구현하는 방법이 있습니다.

wheel 이벤트를 등록할 경우, 지도 레벨이 변경되지 않도록 map.setZoomable(false); 설정해주세요.
레벨 변경 시 setLevel의 animate 속성을 설정하면 애니메이션 효과를 줄 수 있습니다.
그리고 setLevel은 중심 좌표를 기준으로 레벨이 변경되기 때문에 중심좌표는 재설정하지 않아도 됩니다.

3

안내해 주신대로 wheel 이벤트를 등록하고,
setLevel로 처리하니 중심좌표가 변경되지 않고 잘 동작합니다.

그런데, PC에서 마우스휠로 확대축소시에는 잘 동작되지만,
모바일에서는 map.setZoomable(false) 때문에 확대축소가 안됩니다.

PC에서는 마우스휠, 모바일에서는 손가락 줌 기능으로
동일하게 중심좌표가 안바뀌게 구현하려면 어떤 추가작업을 해야 되는지 도움요청드립니다.

4

지도 엘리먼트에 터치 이벤트를 등록해서
2개의 터치 제트처 거리가 가까우면 축소 멀어지면 확대되게 구현해주세요.

6

touchstart 이벤트에서
event.touches[0].clientX, event.touches[0].clientY 지점과
event.touches[1].clientX, event.touches[1].clientY 지점의 사이의 거리를
dist1 변수에 담고,

touchmove 이벤트에서
event.touches[0].clientX, event.touches[0].clientY 지점과
event.touches[1].clientX, event.touches[1].clientY 지점의 사이의 거리를
dist2 변수에 담아두고,

var currentLevel = map.getLevel();
var step = 1;

if(dist1 < dist2){ //움직인 거리가 크면 확대
var changeLevel = currentLevel - step;
map.setLevel(changeLevel, {animate: true});
}else{ //축소
var changeLevel = currentLevel + step;
map.setLevel(changeLevel, {animate: true});
}

두지점의 거리가 가까워지고, 멀어짐을 저렇게 구하는게 맞는지요?

확대 축소는 되지만, pinch동작이 멈춘뒤 한번더 줌이 작동하고 있어요.
touchstart와 touchmove 이벤트만 처리하면 되는가요?
touchend 이벤트는 필요없나요?

확대,축소될때 setLevel 값은 1씩 증가되는건가요?

참고할 만한 샘플코드가 있을런지요?
아니면, 잘못 접근하고 있는것을 지적해 주시고,
올바른 방향을 안내해 주시면 감사하겠습니다.