3

運がないマップAPI MarkerClusterer機能を使用しようとしています:

var markersArray = [];

function getMarkers(hours) {//5

    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }

    image = '/images/site/tw.png';

    $.ajax({
        url: "updateMarkers",
        type:"POST",
        data:{"hours": hours},
        success: function(data){
            data = $.parseJSON( data );
            if (data.Locations.length>0) {//2
                    for (i=0; i<data.Locations.length; i++) {//1
                        loc = new google.maps.LatLng(data.Locations[i].lat, data.Locations[i].lng);

                        marker = new google.maps.Marker({
                            position: loc,
                            map: map,
                            icon: image,
                            html: content
                        });

                        markersArray.push(marker);

                        infowindow = new google.maps.InfoWindow({
                            content: "holding..."
                        });

                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map, this);
                            infowindow.setContent(this.html);
                        });
                    }//1
                }//2
            }
        });

    var markerCluster = new MarkerClusterer(map, markersArray);

}//5

getMarkers(24);

私は見つけることができるすべての例を見てきましたが、ajax コールバック関数内でそれを実行しようとしていますが、他に違いは見られません。マーカーはマップ上に正常に表示されていますが、クラスタリング効果はありません。

4

1 に答える 1

0

Ajaxは非同期です。コールバック関数が完了する前にMarkerClustererを作成したため、グローバル配列markersArrayにマーカーがプッシュされませんでした。これはテストなしで頭のてっぺんにありますが、問題が解決するかどうかを確認してください。

var markersArray = [], markerCluster;

function getMarkers(hours) {//5

    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }

    image = '/images/site/tw.png';

    $.ajax({
        url: "updateMarkers",
        type:"POST",
        data:{"hours": hours},
        success: function(data){
            data = $.parseJSON( data );
            if (data.Locations.length>0) {//2
                    for (i=0; i<data.Locations.length; i++) {//1
                        loc = new google.maps.LatLng(data.Locations[i].lat, data.Locations[i].lng);

                        marker = new google.maps.Marker({
                            position: loc,
                            map: map,
                            icon: image,
                            html: content
                        });

                        markersArray.push(marker);

                        infowindow = new google.maps.InfoWindow({
                            content: "holding..."
                        });

                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map, this);
                            infowindow.setContent(this.html);
                        });
                    }//1

                    //Create the Cluster AFTER all markers are pushed into the markersArray, and make sure it's called within the callback function
                    markerCluster = new MarkerClusterer(map, markersArray);
                }//2
            }
        });

}//5

getMarkers(24);
于 2011-06-20T12:54:39.717 に答える