google-maps - 画面（サイドバー）に表示されるマーカーのみを表示するためのmarkerclustererを使用したgooglemapsのフィルタリング-xmlを介してロードされたコンテンツ

Question

私はこのウェブサイトをグーグルマップベースのhttp://arquitectospelomundo.comで運営しています。このコミュニティのおかげで、私はすでにxmlファイルからデータを読み取り、それをmarkerclustererオブジェクトに処理し、コンテンツを含むサイドバーを表示するようにできました。今、私は画面に表示されているマーカーだけでそのサイドバーをフィルタリングできるかどうかを調べていました（ズームインするとそのリストからアイテムが削除されます）。マーカークラスターが私に苦労しているので、すでに成功していません。助けていただければ幸いです。ありがとう！

Answer 1

マップの bounds_changed-event を観察し、マーカーをループして、マップの境界にマーカーが含まれているかどうかを確認します。

google.maps.event.addListener(map,'bounds_changed',function(){
var bounds=map.getBounds();
$('#side_bar a').each(function(i,e){
  $(e).add($(e).next('br'))
    .css('display',(bounds.contains(gmarkers[i].getPosition()))?'block':'none');
});
});

これによりサイドバー要素がフィルタリングされますが、遅延ロードは変更に気づきません。ただし、スクロールイベントをトリガーすることで、lazyload に画像をロードさせることができます。

google.maps.event.addListener(map,'bounds_changed',function(){
var bounds=map.getBounds();
$('#side_bar a').each(function(i,e){
  var c=bounds.contains(gmarkers[i].getPosition());
  $(e).add($(e).next('br')).css('display',c?'block':'none')
   .find('img').trigger((c)?'scroll':'void');
});
});