重新计算过滤器的 markercluster onclick

Question

JS FIDDLE 这里： http://jsfiddle.net/useyourillusiontoo/g77np63c/1/

我创建了一个 google 地图，它可以放置标记并允许我使用复选框进行过滤，而无需重新加载页面或地图。耶！

接下来我添加了标记集群，它也起作用了。但是，当我现在单击我的标记时，集群不会更新。也就是说..集群内的数字不会改变以反映正在 hidden/displayed.

的标记

当我放大时，标记仍然是 hidden/displayed，但它只是群集在缩小时不显示。

我已经在下面粘贴了我的代码，希望得到任何建议，因为我一直在摸不着头脑。

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();
});

按要求添加了标记。它们是基本的 JSON 对象

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

Answer 1

设置 visible-属性当标记在集群内时不会产生影响，您还必须 remove/add 标记 from/to 标记集群。

可能的解决方案：观察标记的 visible_changed 事件：

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

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

});

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

另一种（可能更好）方法（尤其是当有很多标记时，因为上面的解决方案将强制为每个受影响的标记重绘集群）：首先收集所有受影响的标记，然后使用 addMarkers/showMarkers 切换它们：

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/

重新计算过滤器的 markercluster onclick

Recalculate markercluster onclick of filter

javascript

jquery

google-maps-api-3

google-maps-markers