web-dev-qa-db-ja.com

Google Mapイベントbounds_changedがドラッグ時に複数回トリガーされました

マーカー付きのGoogleマップを持っています。地図を移動/ズームしたときにマーカーを更新したい...

イベントを使用することをお勧めしますbounds_changedそのためですが、マップを移動すると、イベントは、マップを移動するピクセルごとにトリガーされます。ユーザーがマップの移動を停止したとき、つまり、ドラッグ後にマウスボタンを放したときにのみ、マップを更新する必要があります。

どうやってやるの ？

javascriptgoogle-mapsdom-events
57
Matthieu Napoli

報告されたバグであることが判明しました： http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371 。

Googleチームは、イベント「アイドル」の使用を推奨しています。例えば ​​：

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

ほとんどの場合、選択した答えが最適です。遅延を自分で制御したい場合は、次のようなものを使用できます。

 var mapupdater;

 {....}

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


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

イベントが発生するたびに500msでコードを実行するタイムアウトを追加します。イベントが発生するたびにタイムアウトがクリアされ、新しいタイムアウトが作成されます。

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

デバウンス機能の動作を確認する必要があります。ニース Taylor Caseによる記事 次のように定義します：

この関数は、関数の呼び出し回数を制限するために構築されています。スクロールイベント、マウス移動イベント、キー押下イベントはすべて、キャプチャしたいイベントの優れた例ですが、すべてをキャプチャすると非常に負担が大きくなります。彼らが発射する時間。

したがって、コードのどこかに関数を定義します。

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));

ここでは250ミリ秒が適切な周波数であると思われます。

3
Mau Muñoz

すべての冗長な「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
1
yadavr

zoom_changedとdragendの両方を使用してみてください

1
Galen