无法将标记添加到标记簇

Question

我正在尝试将我的标记添加到 MarkerCluster，我有以下代码，我将每个 Marker 推送到 markers 数组。然后我声明markerCluster 并添加markers 数组和地图。但是我的 MarkersClusterer 从未显示，有人可以建议这是为什么吗？

map = new google.maps.Map($('#map_canvas')[0], myOptions);
infowindow = new google.maps.InfoWindow();
markerCluster = new MarkerClusterer(map, markers);

//do ajax request, add marker on success
jQuery.post(ajaxurl, data, function(response) {

    for (key in response) {
        if(response[key]["post_code"] === undefined ){
            return; 
        }
        (function () {
            var markers = [];
            var address = response[key]["address"];
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+response[key]["post_code"]+'&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                var Marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    content: address
                });
                markers.push(Marker);
                google.maps.event.addListener(Marker, 'click', function () {    
                    infowindow.setContent(this.content);
                    infowindow.open(map, this);
                });
            });
        })();
    };
});  

Answer 1

您的markers 变量在MarkerClusterer 中使用时定义在范围之外。您将标记添加到仅存在于匿名 (function(){.. 中的不同 markers 中。要了解这个问题，建议你看看this或this的文章。

编辑

还有！正如用户 vyx.ca 所指出的，MarkerClusterer 具有addMarker() 方法，这是向集群器添加标记的advised way。我的代码现在反映了这种变化。

代码中有注释部分引用了这些更改：

var markers = []; //HERE!!
map = new google.maps.Map($('#map_canvas')[0], myOptions);
infowindow = new google.maps.InfoWindow();
markerCluster = new MarkerClusterer(map, markers);

jQuery.post(ajaxurl, data, function(response) {

    for (key in response) {
        if(response[key]["post_code"] === undefined ){
            return; 
        }
        (function () {
            //REMOVE THIS !! var markers = []; 
            var address = response[key]["address"];
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+response[key]["post_code"]+'&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                var Marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    content: address
                });
                //Changed to line below - markers.push(Marker);
                markerCluster.addMarker(Marker);
                google.maps.event.addListener(Marker, 'click', function () {    
                    infowindow.setContent(this.content);
                    infowindow.open(map, this);
                });
            });
        })();
    };
});