센터, 레벨, LatLngBounds 패딩 동시에 변경할 때 애니메이션

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

레벨변경과 센터 변경을 동시에 적용하는 것은 제공해주신 jump 메쏘드로 해결을 했는데요,
사이드바가 열리기 때문에 bounds 왼쪽에 패딩을 주면서 레벨과 센터를 동시에 이동 시키고 싶은데 역시나 jump 애니메이션이 안나오면서 setBounds 되는 페이드인 애니메이션이 그려지네요.
해결법이 없을까요?

2

내부적으로 jump와 setBounds는 동시에 동작하지 않아
두 함수를 같이 호출하면 둘 중 하나는 무시되어 의도한 동작(패딩+점프)이 함께 나오지 않습니다.

패딩을 jump 하나로 처리하려면, 아래 코드처럼 center를 미리 보정해서 넘기는 방식을 고려해볼 수 있습니다.
단, 현재 레벨이 목표 레벨보다 많이 축소된 상태에서 큰 폭으로 줌인하는 경우엔 픽셀 보정 오차가 커질 수 있어 위치가 어긋날 수 있는 점 참고 부탁드립니다.

//jumpWithLeftPadding(center, level, 320, { duration: 600 });

function jumpWithLeftPadding(center, level, leftPadding, animate) {
    const proj = map.getProjection();

    // 넘어온 center가 현재 레벨에서 화면의 어느 픽셀 좌표에 찍히는지 구한다.
    const pt = proj.containerPointFromCoords(center);

    // 줌 레벨 보정 배율 
    //  leftPadding/2 는 "목표 레벨"의 픽셀인데, pt와 아래 변환은 "현재 레벨" 픽셀을 쓴다.
    // 레벨이 1 커질수록 한 픽셀이 덮는 거리가 2배 → 환산 배율 k = 2^(목표레벨 - 현재레벨)
    const k  = Math.pow(2, level - map.getLevel());

    //  지도는 center 를 컨테이너 정중앙(W/2)에 그리기 때문에 보정이 필요,
    //  center 가 정중앙이 아니라, 사이드바 오른쪽 영역의 중앙(= 정중앙에서 leftPadding/2 px 만큼 오른쪽)에 찍혀야함
    //  그러려면 지도 center 를 leftPadding/2 px 만큼 왼쪽으로 이동.        
    //  y 는 그대로 유지
    center = proj.coordsFromContainerPoint(
        new kakao.maps.Point(pt.x - (leftPadding / 2) * k, pt.y)
    );

    // 보정된 center 로 jump
    map.jump(center, level, { animate: animate });
}