Question

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: "<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 - 属性将不起作用，您还必须从/向flagsclusterer移除/添加标记。

可能的解决方案：观察标记的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

1 个答案: