web-dev-qa-db-ja.com

markerclusterer v3を使用して、Googleマップの境界内のマーカーのリストを取得します

現在、Googleマップにデータベースのデータを入力しています。 markerclusterer v3を使用してマーカーをクラスター化し、マップの読み込みを高速化しています。私はドキュメントを精査しましたが、マップの境界にあるすべてのマーカーのリストを取得する方法を見つけることができないようです。基本的に、外部divにマーカーアドレスの外部リストを作成しようとしています。現在、ページの読み込み時に、宛先のリスト全体が追加されます。私がやりたいのは、マーカーと、その時点でそのマップに表示され、リストに表示されるクラスターに含まれているマーカーのみを設定することです。したがって、ズーム13では6つのクラスターがあり、それぞれに3つと1つのソロマーカーがあります。ズーム14では、3および2のソロマーカーの3つのクラスターがあります。ズーム13ではリストに19のアドレスがあり、ズーム14ではリストに11のアドレスがあります。マップの境界内のマーカーの単なるリスト。現在、最初のマップ作成時にすべての住所を一度ロードします。ズームごとにサーバーへのajax投稿を作成することを考えましたが、マップの移動ごとにサーバーを呼び出す必要はほとんどありませんでした。 markerclustererによって制御される境界内のマーカーのリストを取得する方法が必要です。

.js

var markers = [];       
for (var i = 0; i < data.coords.length; i++) {
    var dataInd = data.coords[i];
    var latLng = new google.maps.LatLng(dataInd[1],dataInd[2]);
    var marker = new google.maps.Marker({position: latLng});
    markers.Push(marker);

}
var map;
var myOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
function init() {
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var markerCluster = new MarkerClusterer(map, markers);
}
for (var i=0; i < markers.length; i++) {
    if (map.getBounds.contains(markers[i])) {
         console.log(markers);
    } else {
         console.log('failed');
    }
}

google.maps.event.addDomListener(window, 'load', init);
jquerygoogle-mapsgoogle-maps-api-3markerclusterer
12
user1881482
  1. マーカー配列をグローバルにします。
  2. マップ変数をグローバル（または少なくともスコープ内）にします。

  3. このコードを実行します。

    for (var i=0; i < markers.length; i++) 
{
    if (map.getBounds().contains(markers[i].getPosition()))
    {
        // markers[i] in visible bounds
    } 
    else 
    {
        // markers[i] is not in visible bounds
    }
}

pdate：これを行う必要がある場合があります（ループをinit関数に追加しようとしている場合）。その他のオプション（これを実行する理由理由がはっきりしていません）：

  1. マーカーを追加する初期ループのマーカーテスト。
  2. addListenerではなくaddListenerOnceを使用します。

  3. マップがズームまたはパンされたとき（境界が再び変更されたとき）は常に「listOfItems」を再レンダリングすることができます

    var map = null;
var markers = [];
function init() 
{
    var myOptions = 
    {
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    for (var i = 0; i < data.coords.length; i++) 
    {
        var dataInd = data.coords[i];
        var latLng = new google.maps.LatLng(dataInd[1],dataInd[2]);
        var marker = new google.maps.Marker({ position: latLng });        
        markers.Push(marker);
        $('#listOfItems').append('<li>' + latlng + '</li>');
    }

    var markerCluster = new MarkerClusterer(map, markers);

    google.maps.event.addListener(map, 'bounds_changed', function() 
    {
        for (var i = 0; i < markers.length; i++) 
        {
            if (map.getBounds().contains(markers[i].getPosition())) 
            {
                // markers[i] in visible bounds
            } 
            else 
            {
                // markers[i] is not in visible bounds
            }
        }
    });
}

google.maps.event.addDomListener(window, 'load', init);
15
geocodezip