[javascript] 터치 이벤트를 사용하여 터치한 위치에 맞춰 지도를 이동시키는 방법은?

12 Dec 2023

javascript

도움이 되도록, 터치한 위치에 따라 지도를 이동시키는 기본적인 JavaScript 코드를 제공해드리겠습니다.

var map = document.getElementById('map');

var isDragging = false;
var startX, startY;
var scrollLeft, scrollTop;

map.addEventListener('touchstart', function(e) {
  isDragging = true;
  startX = e.touches[0].clientX - map.offsetLeft;
  startY = e.touches[0].clientY - map.offsetTop;
  scrollLeft = map.scrollLeft;
  scrollTop = map.scrollTop;
});

map.addEventListener('touchmove', function(e) {
  if (!isDragging) { return; }
  e.preventDefault();
  var x = e.touches[0].clientX - startX;
  var y = e.touches[0].clientY - startY;
  map.scrollTop = scrollTop - y;
  map.scrollLeft = scrollLeft - x;
});

map.addEventListener('touchend', function() {
  isDragging = false;
});

이 코드는 ‘map’이라는 ID를 가진 요소에 터치 이벤트를 추가하여, 사용자의 터치로 지도를 이동시키는 기능을 구현합니다.

이제, 이 코드를 사용하여 웹 페이지에서 지도를 이동시키는 간단한 기능을 구현할 수 있을 것입니다.