panTo가 실행되는 도중 지도 멈춤 관련 이슈

안녕하세요.

panTo 도중 지도를 클릭하면 지도가 해당 위치에 멈추게 되고 center_changed, bound_changed 이벤트가 발생하지 않는 이슈가 있어서 문의드립니다.

일단 코드는 다음과 같습니다.
panTo 이후 이동이 완료되었다는 것을 탐지하기 위해 bounds_changed 이벤트를 걸어두었고, panTo로 지도 이동이 완료되면 bounds_changed 이벤트가 발생해서 이후 동작을 수행하도록 해두었습니다.

<div id="map" style="width:750px;height:750px;"></div>

<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(37.56682, 126.97865), // 지도의 중심좌표
        level: 1, // 지도의 확대 레벨
        mapTypeId : kakao.maps.MapTypeId.ROADMAP, // 지도종류
        disableDoubleClick : true,
    }; 
// 지도를 생성한다 
var map = new kakao.maps.Map(mapContainer, mapOption); 
// 지도 영역 변화 이벤트를 등록한다

    setTimeout(function() {
        var moveTo = new kakao.maps.LatLng(37.56562, 126.97865);
    map.panTo(moveTo);
    }, 1000);


    

kakao.maps.event.addListener(map, 'bounds_changed', function () {
	var mapBounds = map.getBounds(),
		message = '지도의 남서쪽, 북동쪽 영역좌표는 ' +
					mapBounds.toString() + '입니다.';
	console.log(message);	
});
</script>

panTo가 정상적으로 실행되면, bounds_changed 이벤트가 발생하고 있습니다.

현재 발생하는 이슈는 panTo가 실행되는 도중 지도 이동을 완료하기 전 지도를 클릭하면 지도가 멈추게 되고, bounds_changed나 center_changed 이벤트가 발생하지 않고 있습니다.
(지도가 멈추었다고 하더라도, 원래 좌표에서 약간은 이동한 상태입니다.)

문의드리고 싶은 내용은

  1. panTo 도중 지도를 클릭하더라도 지도가 멈추지 않게 되는데, 혹시 의도된 동작인지 궁금합니다.

  2. 혹시 panTo 도중 지도를 클릭하더라도 지도가 멈추지 않고, 목표한 좌표까지 정상적으로 이동을 완료할 수 있는 방법이 있을까요?

  3. 2번이 불가능하다면 panTo가 정상적으로 실행되거나 도중에 지도를 클릭해서 지도를 멈추더라도, 발생하는 이벤트가 있을까요?

  4. panTo 완료에 대한 시그널을 bounds_changed 이벤트를 통해 받고 있는데, 혹시 panTo가 완료되었다는 시그널을 주는 다른 이벤트가 있을까요? (center_changed나 idle 이외 panTo 전용 이벤트가 있을까요?)

감사합니다.

  1. panTo는 설정한 좌표까지 이동하는 API로 멈추지 않습니다.
  2. 샘플 페이지가 아닌 HTML파일로 실행해도 동일한 현상이 나는지 확인해주세요.
    제 로컬에서는 panTo를 실행하고 지도 클릭 또는 이동해도
    panTo API 호출 및 bounds_changed 이벤트가 정상 동작 됩니다.
    다시 한번 확인해주세요.
  3. panTo 전용 이벤트는 없습니다.
    bounds_changed, center_changed, idle 이벤트를 활용해주세요.
1개의 좋아요

답변 감사합니다.

HTML 파일로 실행해도 동일한 현상이 발생하고 있습니다.
다른 환경에서도 테스트를 해보았지만 여전히 동일한 증상을 보이고 있습니다.

  • Mac, Window에서 사파리, 크롬, IE, 엣지에서 모두 발생하고 있습니다.
  • HTML 파일에서 실행했을 때 증상이 발생하여 샘플 페이지에서 재현해서 보여드렸습니다.

증상 재현방법은 panTo가 동작하는 중간에 지도를 여러번 빠르게 클릭하면 발생하고 있으며 자주 발생하는 현상은 아닙니다.
번거로우시겠지만 이 부분에 대해서 다시 한번 확인 ​부탁드립니다.

추가로 문의드리고 싶은 게 있는데, 주신 답변에서

제 로컬에서는 panTo를 실행하고 지도 클릭 또는 이동해도
panTo API 호출 및 bounds_changed 이벤트가 정상 동작 됩니다.

중 panTo를 실행하고 지도 이동을 해도 panTo API 호출 및 bounds_changed 이벤트가 정상적으로 동작한다는 부분이
panTo가 실행되면 실행 중간 어떠한 간섭이 있더라도 설정한 좌표로 이동하는 것을 의미하는 건가요?

현재 panTo를 호출하고 설정한 좌표로 이동하기 전 지도를 드래그해서 이동하면 설정한 좌표까지 이동하지 않는 현상이 있습니다.

  • panTo 애니메이션이 실행되고 있는 도중 지도를 드래그해서 이동하면 panTo 동작이 무시되는 것처럼 보입니다.
1개의 좋아요

안녕하세요.
알려주신 재현방법으로 테스트하니 현상을 확인할 수 있었습니다.

현재 수정하여 배포되었습니다.
제보해 주셔서 감사합니다.

1개의 좋아요

안녕하세요.
착오가 있어서 다시 안내드립니다.

아직 배포 전으로 금주 내로 배포가 될 예정입니다.
배포되면 다시 연락드리겠습니다.
혼란을 드려 죄송합니다.

1개의 좋아요

panTo 실행 도중 중간에 멈춰도 이벤트가 호출되도록 수정되었습니다.
또한, 클릭이나 다른 동작 도중 애니메이션 취소를 원치 않는다면
아래와 같이 cancelable: false 속성을 사용해주세요.

map.panTo(latlng, { animate: { cancelable: false } });

아직 공식 문서에는 업데이트되지 않았습니다.
문서는 빠른 시일 내에 업데이트 할 예정이며
문서와 별개로 기능은 구현되어 있으므로 미리 사용 가능합니다.

1개의 좋아요

잘 동작하는 것을 확인하였습니다.

감사합니다!

1개의 좋아요