Google Maps Marker Filtering

Question

我有以下jsfiddle：

http://jsfiddle.net/inkedraskal/zeLon7cs/2/

当地图加载显示的所有点时，您会注意到，并且过滤本身似乎正常工作。 但是，当您单击过滤器（例如项目）时，它将仅显示项目，但如果再次单击它，则不会重置标记。同样，如果您说点击新闻，然后点击资料，再次点击资料，它就不会显示仅适用于的标记新闻（仍显示适用于新闻和资料的标记，而不仅仅是新闻）。

任何提示都将非常感激。

我在点击

上创建列表项到过滤标记

<div class="filters">
  <ul>
      <li>
          <a href="#" data-filterby="type" data-filtervalue="project">Projects</a>
      </li>
      <li>
          <a href="#" data-filterby="type" data-filtervalue="news">News</a>
      </li>
      <li>
          <a href="#" data-filterby="type" data-filtervalue="stuff">stuff</a>
      </li>
  </ul>
  <ul>
      <li>
          <a href="#" data-filterby="date" data-filtervalue="201401">Jan</a>
      </li>
      <li>
          <a href="#" data-filterby="date" data-filtervalue="201402">Feb</a>
      </li>
      <li>
          <a href="#" data-filterby="date" data-filtervalue="201403">Mar</a>
      </li>
  </ul>
</div>
<div class="clear"></div>

在我的JS底部你会看到以下内容：

$(document).on('click', '.filters a', function (event) {
     event.preventDefault();
     var $target = $(event.target);
     var type = $target.data('filterby');
     var value = $target.data('filtervalue');
     $(this).toggleClass('active');
     $.each(map.markers, function () {
         if (this.filter[type] && this.filter[type].indexOf(value.toString()) >= 0) {
             if (this.map == null) {
                  this.setMap(map);
             }
         } else {
             this.setMap(null);
         }
     });
});

Answer 1

在循环中隐藏/显示每个标记，对于每个单独的标记，您只检查该标记是否具有单击的过滤器值。您需要针对每个活动过滤器检查每个标记。

 $(document).on('click', '.filters a', function(event) {
  event.preventDefault();

  $(this).toggleClass('active');

  // create an array of active filters
  var activeFilters = [];
  $(".filters a.active").each(function() {
    activeFilters.push({
      by: $(this).data("filterby"),
      value: $(this).data("filtervalue").toString()
    });
  });

  if (activeFilters.length === 0) { // if there are no active filters, show all markers
    for (var i = 0; i < map.markers.length; i++) {
      map.markers[i].setMap(map);
    }
  } else {
    for (var i = 0; i < map.markers.length; i++) { // for each marker
      var marker = map.markers[i]; // just to make the next code easier

      var missingActiveFilter = false;
      // check if marker has every active filter
      for (var j = 0; j < activeFilters.length; j++) {
        var filter = activeFilters[j];
        if (filter.by === "type" && marker.filter.type.indexOf(filter.value) === -1 || filter.by === "date" && marker.filter.date.indexOf(filter.value) === -1) {
          missingActiveFilter = true;
          break;
        }
      }

      if (missingActiveFilter) {
        marker.setMap(null);
      } else {
        marker.setMap(map);
      }

    }
  }
});

}）;

Updated JSFiddle