重新计算filter的markercluster onclick

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

我已经创建了一个谷歌地图，可以将标记向下植入，并允许我使用复选框进行过滤，而无需重新加载页面或地图。 好极了！

接下来我添加了也起作用的标记簇。 但是，当我现在单击我的标记时，群集不会更新。 那就是..群集内的数字不会改变，以反映隐藏/显示的标记。

当我放大时，标记仍然被隐藏/显示，但只有群集在缩小时不显示。

我在下面粘贴了我的代码并且会喜欢任何建议，因为我一直在摸不着头脑。

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: "
"+ development.name +"
Show more!" }); 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 -property将不起作用，您还必须从/包含标记包括删除/添加标记。

可能的解决方案：观察标记的visible_changed -event：

 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/