panTo 와 panBy를 연이어 사용하면 작동안합니다

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

화면 전체에 꽉찬 지도를 사용중입니다.
그런데 특정 position에 대하여 지도 중앙에 위치시킬때
화면에서 약간 오른쪽에 치우치도록 두고싶습니다.

그래서 아래와 같이 특정 position으로 panTo한 후 특정 width 만큼 오른쪽으로 panBy 하는데
panTo가 안 먹히고 panBy만 작동해버립니다.
panTo가 스킵됩니다.

해결방법좀 제발 알려주세요… ㅠㅠ 제발요

mapInstanceRef.current.panTo(position); // 화면 중앙을 position으로 이동
mapInstanceRef.current.panBy(-widthOfDeviceControlPanelPC / 2, 0); // PC 뷰에서 x 축 방향으로 이동

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

2

그 둘은 에니메이션 로직이 기본적용된 함수입니다.
그래서 한쪽에서 cancel animation이 되는 것으로 보입니다.

내부적으로 애니메이션 듀레이션의 기본값은 300인데,
해당 두 함수를 동시에 실행시키지 마시고, 최소 300ms 이상은 딜레이를 두고 실행시켜보시기 바랍니다.

그리고 특정 좌표값을 지도화면 중앙으로 옮기실때는 그냥 setCetner를 통해서 이동하셔도 될것 같습니다.

1개의 좋아요
3

답변감사드립니다.
두 함수를 동시에 실행시키려고 한 이유는
매번 지도 중앙을 설정할때 윈도우 정중앙에서 x축으로 약간 이동시킨 위치를 중앙으로 삼고싶기 때문입니다.

mapCenter 후 panBy를 할 경우 position이 크게 바뀌지 않는데도 불구하고
mapCenter → panBy 에 의해 애니메이션이 반복 적용되어 불편합니다.

mapCenter 지정시에 일정 크기만큼 좌측에 패딩을 줄 수 있는 방법이 있으면 알고싶습니다.
부탁드리겠습니다 ㅠㅠ

4 
var center = new kakao.maps.LatLng(33.450701, 126.570667);
var mapProjection = map.getProjection();
var cfc = mapProjection.containerPointFromCoords(center);
cfc.x -= 200;
var coords = mapProjection.coordsFromContainerPoint(cfc);
map.setCenter(coords)

한번 projection 객체를 이용해 보시기 바랍니다.

지도가 렌더링 되어 있어야 하고,
지도 컨테이너(DOM)의 좌상단을 0,0으로 하는 계산하는 containerPointFromCoords 함수를 통해서,
현재 출력하고자 하는 좌표의 화면좌표를 뽑은 후에, x값을 특정 수치만큼 뺀 다음, 그에 해당하는 좌표값으로 다시 변환후에, setCenter를 해주는 방법입니다.

한번 확인해 보세요~