드래그 할 때 Google지도 이벤트 bounds_changed가 여러 번 트리거 됨

드래그 할 때 Google지도 이벤트 bounds_changed가 여러 번 트리거 됨

---

마커가있는 Google지도가 있습니다. 지도를 이동 / 확대 할 때 마커를 새로 고침하고 싶습니다.

이를 위해 이벤트를 사용하는 것이 좋지만 bounds_changed지도를 이동할 때지도를 이동하는 각 픽셀에 대해 이벤트가 트리거됩니다 . 사용자가지도 이동을 멈춘 경우 (예 : 드래그 한 후 마우스 버튼을 놓을 때) 만지도를 새로 고치고 싶습니다.

어떻게 할 수 있습니까?

---

보고 된 버그 인 것으로 밝혀졌습니다. http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371 .

Google 팀은 "유휴"이벤트를 사용하는 것이 좋습니다. 예 :

google.maps.event.addListener(map, 'idle', function() {
});

---

선택한 답변은 대부분의 상황에 가장 적합합니다. 지연을 직접 제어하려면 다음과 같이 사용하면됩니다.

 var mapupdater;

 {....}

 google.maps.event.addListener(map, "bounds_changed", mapSettleTime); 


 function mapSettleTime() {
     clearTimeout(mapupdater);
     mapupdater=setTimeout(getMapMarkers,500);
 }

---

이벤트가 발생한 후 500ms 후에 코드를 실행하는 시간 제한을 추가하고 이벤트가 발생할 때마다 시간 제한을 지우고 새로 만듭니다.

google.maps.event.addListener(map, 'bounds_changed', (function () {
    var timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            // here goes an ajax call
        }, 500);
    }
}()));

---

디 바운스 기능이 어떻게 작동하는지 확인해야합니다. Taylor Case 의 멋진 기사 는 다음과 같이 정의합니다.

이 함수는 함수가 호출되는 횟수를 제한하기 위해 구축되었습니다. 스크롤 이벤트, mousemove 이벤트 및 키 누르기 이벤트는 모두 캡처하려는 이벤트의 훌륭한 예이지만 매번 캡처하면 상당한 부담이 될 수 있습니다. 발사 시간.

따라서 코드 어딘가에 함수를 정의합니다.

function debounce(fn, time) {
  let timeout;
  return function() {
    const args = arguments;
    const functionCall = () => fn.apply(this, args);
    clearTimeout(timeout);
    timeout = setTimeout(functionCall, time);
  }
}

그런 다음 리스너를 추가 할 때 해당 함수를 사용합니다.

google.maps.event.addListener(myMap, 'bounds_changed', debounce(() => { /* Do something here */ }, 250));

250ms가 여기에 사용하기에 좋은 주파수 인 것 같습니다.

---

zoom_changed와 dragend를 모두 사용해보십시오

---

다음은 모든 중복 된 'bound_changed'호출을 제거하는 작은 스 니펫입니다.

var timeout;
google.maps.event.addListener(map, 'bounds_changed', function () {
window.clearTimeout(timeout);
timeout = window.setTimeout(function () {
    //do stuff on event
    }, 500);
}); //time in ms, that will reset if next 'bounds_changed' call is send, otherwise code will be executed after that time is up

참고URL : https://stackoverflow.com/questions/4338490/google-map-event-bounds-changed-triggered-multiple-times-when-dragging