[Map API] map 의 click event 이후 위 경도값에 따라 화면 움직이게 하는 방법

Yuri Lee·2021년 4월 18일
0

Todo

  • 수많은 배열 좌표값이 있다. 이 좌표값을 따라 좌표 센터값을 유지하면서 화면의 움직임을 표현해야 한다. 화면이 좌표 센터값을 중심으로 움직이기 위해서는 event 가 필요할 것 같다고 생각했다. (예를 들어 클릭 이벤트와 같은..)
  • 처음 맵을 초기화 시킨 이후, 그 위치에서 map 위의 아무 곳을 클릭하는 순간 저장되어 있는 수많은 centers (위, 경도) 값에 맞춰서 이동하도록 코드를 구현해야 한다.

Problem 1

var centers = [
 {latlng: new maps.LatLng(33.4457991, 126.488551)},
 {latlng: new maps.LatLng(33.44546106, 126.4887215)},
 ..... ,
 {latlng: new maps.LatLng(33.44510391, 126.4887526)}
]

다음과 같은 수많은 위 경도 값 객체가 있다.

function move() {
    centers.forEach(function (center, index) {
        setTimeout(function () {
            // do whatever
            console.log("move!!!");
            map.panTo(center.latlng);
            map.setCenter(center.latlng);
        }, 10 * (index + 1));
    })
}


function initialize() {
  // map 초기화
  mapOpts = {
    center: new maps.LatLng(33.52384675, 126.5444758),
    zoom: 8,
    mapTypeId: 'ROADMAP',
  };
  map = new maps.Map(document.getElementById('map'), mapOpts);
  // map 을 클릭할 때 moveToKT함수를 호출하도록 함. map을 매개변수로 갖는다.
  // center 값이 계속 바뀌면서 move함수를 호출해야 한다.
  map.onEvent('click', function (event, payload) {
    move();
  }, map);
}
  • 처음에는 for 문을 사용해서 표현하려고 했으나 버그가 발생했다. for 문을 사용한 이유는 다른 forEach, each 구문보다 속도가 가장 빠르기 때문이였다. 열심히 구글링 후 for문이 아닌 forEach 문을 사용해보라는 글을 봤다.
  • for문은 i값이 scope 유지를 하지 못하므로 문제가 된다고 한다. 반복문이 centers.length 값과 같은 값에서 i값의 증가가 멈추게 되고 후에 클릭 이벤트에서 centers[i]로 접근했을때 배열 range밖의 값을 참조하게 된다. 따라서 버그가 발생했던 것 .. for 문을 forEach로 바꿔주니 제대로 동작했다.

Problem 2

  • setTimeout 함수를 이용해야 했는데, 늘어나는 시간을 각 centers 마다 일정시간을 더해서 맞춰줘야 했다. for문을 사용하지 않고, forEach문을 사용하는 와중에 어떻게 안에 변수를 설정해야 하지 싶었다.
json.objects.forEach(function(obj, index) {
    setTimeout(function(){
      // do whatever
    }, 5000 * (index + 1));
});
  • 구글링을 결과 다음의 코드를 발견했다. 다음과 같이 index 라는 파라미터를 더 설정해서 사용하면 된다.

https://stackoverflow.com/questions/37977602/settimeout-not-working-inside-foreach
https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop
https://devtalk.kakao.com/t/topic/56194

profile
Step by step goes a long way ✨

0개의 댓글