Recalculate markercluster onclick of filter

问题

JS FIDDLE HERE: http://jsfiddle.net/useyourillusiontoo/g77np63c/1/

I've created a google map that plants markers down and allows my to filter then with checkboxes without the page or map reloading. Yay!

Next I added marker cluster which worked too. However, when I now click on my markers the cluster doesn't update. That is.. the number inside the cluster doesnt change to reflect markers that are being hidden/displayed.

When I zoom in the markers are still being hidden/displayed but its just the cluster doesn't show this when zoomed out.

I've pasted my code below and would love any advice because i've been scratching my head.

var map;
var infowindow;
var image = [];
var gmarkers = [];
var clusterMarkers = [];


  function mapInit(){
    var centerCoord = new google.maps.LatLng(53.01265600000,-1.466105200000); 
    var mapOptions = {
        zoom: 6,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

google.maps.event.addListener(map, 'click', function() {
  infowindow.close();
});


addLocation();
var markerCluster = new MarkerClusterer(map, clusterMarkers);


function addLocation(place,category) {
  for (var x in points){
      var development = points[x];
      var location = new google.maps.LatLng(development.lat, development.lng);

      storeMarker(location, development);
  }   
}


function storeMarker(location, development){
  var latLng = location;
  var storedmarker = new google.maps.Marker({
        position: latLng
  });
  storedmarker.mycategory = development.tid;

  google.maps.event.addListener(storedmarker, 'click', function() {
    if(typeof infowindow != 'undefined') infowindow.close();
    infowindow = new google.maps.InfoWindow({
      content: "<h3>"+ development.name +"</h3><a href='http://www.bbc.co.uk'>Show more!</a>"
  });
    infowindow.open(map, storedmarker);
  });    

  clusterMarkers.push(storedmarker);    
}



function show(category) {   
  for (var i=0; i<clusterMarkers.length; i++) {
    if (clusterMarkers[i].mycategory == category) {
      clusterMarkers[i].setVisible(true);
    }
  }
  document.getElementById(category+"box").checked = true;
}

function hide(category) {
  for (var i=0; i<clusterMarkers.length; i++) {
    if (clusterMarkers[i].mycategory == category) {
      clusterMarkers[i].setVisible(false);
    }
  }
  document.getElementById(category+"box").checked = false;
  infowindow.close();
}

function boxclick(box,category) {
  if (box.checked) {
    show(category);
  } else {
    hide(category);
  }
}

jQuery(document).ready(function($) {
  $('.b2bfilter').click(function () {
    boxclick(this, this.value);
  });
});

}

jQuery(document).ready(function(){
    mapInit();
});

added markers as requested. They are a basic JSON object

var points = [
{"name":"House","lat":"53.341265600000","lng":"- 1.466105200000","tid":"1"},
{"name":"Old house","lat":"53.361066200000","lng":"-1.465752700000","tid":"2"}]

回答1:

setting the visible-property will not have an effect when a marker is inside a cluster, you must also remove/add the marker from/to the markerclusterer.

Possible solution: observe the visible_changed -event of the markers:

google.maps.event.addListener(storedmarker,'visible_changed',function(){

       markerCluster[(this.getVisible())?'addMarker':'removeMarker'](this)

});

http://jsfiddle.net/doktormolle/g77np63c/4/

another(possibly better) approach(especially whene there are a lot of markers, because the solution above will force a redraw of the clusters for each affected marker): First collect all affected markers and then use addMarkers/showMarkers to toggle them:

function toggle(category, show) {

    var markers = [];

    for (var i = 0; i < clusterMarkers.length; i++) {
        if (clusterMarkers[i].mycategory == category) {
            markers.push(clusterMarkers[i]);
            clusterMarkers[i].setVisible(show);
        }
    }
    if (markers.length) {
        markerCluster[(show) ? 'addMarkers' : 'removeMarkers'](markers);
    }

    if (!show && infowindow) infowindow.close();

}



function boxclick(box, category) {

    toggle(category, box.checked);

}

jQuery(document).ready(function ($) {
    $('.b2bfilter').click(function () {
        boxclick(this, this.value);
    });
});

http://jsfiddle.net/doktormolle/g77np63c/5/

来源：https://stackoverflow.com/questions/28398881/recalculate-markercluster-onclick-of-filter