重新计算过滤器上的markercluster [英] Recalculate markercluster onclick of filter

问题描述

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

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

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

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

我在下面粘贴了我的代码，并且会喜欢任何建议，因为我一直在挠头。 p>

  var map; 
 var infowindow; 
 var image = []; 
 var gmarkers = []; 
 var clusterMarkers = []; 
 
 
函数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）; 
 
 
函数addLocation（place，category）{
 for（var x in points）{
 var development = points [x]; 
 var location = new google.maps.LatLng（development.lat，development.lng）; 
 
 storeMarker（位置，开发）; 
 
 
 
 
函数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 '>显示更多！< / a>
}）; 
 infowindow.open（map，storedmarker）; 
}）; 
 
 clusterMarkers.push（storedmarker）; 
} 
 
 
 
函数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; 
} 
 
函数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（）; 
 
 
函数boxclick（box，category）{
 if（box.checked）{
 show（category）; 
} else {
 hide（category）; 
 
 
 
 jQuery（document）.ready（function（$）{
 $（'。b2bfilter'）。click（function（）{
 boxclick（this，this.value）; 
}）; 
}）; 
 
 
 $ b jQuery（document）.ready（function（）{
 mapInit（）; 
}）; 
  

根据要求添加标记。它们是一个基本的JSON对象

  var points = [
 {name：House，lat ：53.341265600000，lng： -  1.466105200000，tid：1}，
 {name：老房子，lat：53.361066200000，lng -1.465752700000，tid：2}] 
  

解决方案

设置可见 -property在标记位于集群内时不起作用，您还必须将标记从/中移除/添加到markerclusterer。

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

pre $ lt; code> google.maps.event.addListener（storedmarker，'visible_changed'，function（）{

markerCluster [（this.getVisible（）） 'addMarker'：'removeMarker']（this）

}）;

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

另一个（可能更好） （特别是有很多标记，因为上面的解决方案会强制重绘每个受影响标记的簇）：
首先收集所有受影响的标记，然后使用 addMarkers / showMarkers 来切换它们：

  function toggle（类别，显示）{
 
 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']（标记）; $！
 
 $ b if（！show&& infowindow）infowindow.close（）; 
 
 
 
 
 $ b function boxclick（box，category）{
 
 toggle（category，box.checked）; 
 
 
 $ b jQuery（document）.ready（function（$）{
 $（'。b2bfilter'）。click（function（）{
 boxclick（this，this.value）; 
}）; 
}）; 
  

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

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"}]

解决方案

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/

这篇关于重新计算过滤器上的markercluster的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！