MarkerClusterer 没有出现在我的地图中

Question

我正在尝试使用它来实现，为什么我无法使用它来实现它。我试过把我的标记放在数组中，因为你可以发现我的 var markers 被定义为数组，最后我尝试使用 var mc = new MarkerClusterer(map, markers); 输出它

这个我参考了http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/docs/examples.html

在哪里提到：

创建标记集群后，您需要向其中添加标记。 MarkerClusterer 支持使用 addMarkers() 方法添加标记 或者通过向构造函数提供一组标记：

JS 小提琴： http://jsfiddle.net/24wfR/

下面提到的是我实现这个的代码

function createMarker(latlng, i, tran_store_id) {
    var storeMarker = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
    var marker = new MarkerWithLabel({
        position: latlng,
        icon: storeMarker,
        map: map,
        draggable: false,
        raiseOnDrag: false,
        labelContent: (i + 1),
        labelAnchor: new google.maps.Point(0, 40),
        labelClass: "store-custom-labels label_" + (i) + "_no",
        // the CSS class for the label
        labelInBackground: false
    });
    marker.set("id", i);
    //console.log(Drupal.settings.store.themepopup[tran_store_id]);
    var myOptions = {
        content: Drupal.settings.store.themepopup[tran_store_id],
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-142, -379),
        zIndex: null,
        boxStyle: {
            width: "500px"
        },
        closeBoxMargin: "6px -161px 0px 0px",
        closeBoxURL: Drupal.settings.store.module_path + "/images/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "overlayMouseTarget",
        enableEventPropagation: false
    };
    var ib = new InfoBox(myOptions);
    google.maps.event.addListener(marker, "click", function (e) {
        google.maps.event.trigger(map, "click");
        for (var i = 0; i < totalMarkerCount; i++) {
            var giconsc = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
            markers[i].setIcon(giconsc);
            jQuery('.label_' + i + '_no').css('color', '#ffffff');
        }
        var val = marker.get("id");
        jQuery("div.search-result-item").removeClass("active");
        jQuery("#" + val).addClass('active');
        jQuery('.label_' + val + '_no').css('color', '#ffffff');
        var gicons = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(55, 0), new google.maps.Point(0, 50));
        marker.setIcon(gicons);
        ib.open(map, marker);
    });
    google.maps.event.addListener(marker, "mouseover", function () {
        var val = marker.get("id");
        if (!jQuery('#' + val).hasClass('search-result-item active')) {
            jQuery('.label_' + val + '_no').css('color', '#ffffff');
        }
    });
    google.maps.event.addListener(marker, "mouseout", function () {
        var val = marker.get("id");
        if (!jQuery('#' + val).hasClass('search-result-item active')) {
            var gicons = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
            marker.setIcon(gicons);
            jQuery('.label_' + val + '_no').css('color', '#ffffff');
        }
    });
    google.maps.event.addListener(ib, "closeclick", function () {
        ib.close();
        var val = marker.get("id");
        jQuery("#" + val).removeClass('active');
        jQuery('.label_' + i + '_no').css('color', '#ffffff');
        var gicons = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
        marker.setIcon(gicons);
    });
    google.maps.event.addListener(map, 'click', function () {
        ib.close();
        var val = marker.get("id");
        jQuery("#" + val).removeClass('active');
        jQuery('.label_' + i + '_no').css('color', '#ffffff');
        var gicons = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
        marker.setIcon(gicons);
    });
    markers.push(marker);
    var mc = new MarkerClusterer(map, markers);
}

Answer 1

归功于Anto Jurković

答案很清楚，再次感谢！

在调用 createMarker() 函数的 loop 之后创建 cluster。因此，我做了同样的事情，在我的循环完成后称为var mc = new MarkerClusterer(map, markers);，我称之为createMarker()

for (var i = 0; i < markerNodes.length; i++) {
    name = markerNodes[i].getAttribute("name");
    address = markerNodes[i].getAttribute("address");
    latlng = new google.maps.LatLng(
    parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng")));
    timings = markerNodes[i].getAttribute("timings");
    size = markerNodes[i].getAttribute("size");
    phone = markerNodes[i].getAttribute("phone");
    getaddress = markerNodes[i].getAttribute("getaddress");
    tran_store_id = markerNodes[i].getAttribute("tran_store_id");
    sidebar_entry = '<div id=' + i + ' class="contact_content"><div class="top"><em>' + markerNodes[i].getAttribute("name") + '</em><br /> ' + address + '</div>';
    if (phone != '') {
        sidebar_entry = sidebar_entry + '<div class="btm"> ' + phone + '</div>';
    }
    sidebar_entry = sidebar_entry + '</div>';
    jQuery('#stores_list').append(sidebar_entry);
    createMarker(latlng, i, tran_store_id);
    bounds.extend(latlng);
    var viewlist = document.getElementById(i);
    viewlist.onclick = function () {
        selectMarker(this.id);
        jQuery("#stores_list.div").removeClass("active");
        jQuery(this).addClass("active");
    };
    totalMarkerCount = i;
    j++;
}
var mc = new MarkerClusterer(map, markers);