2016-03-31 28 views
0

Ich habe folgendes jsfiddle:Google Maps Marker Filtering

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

Sie werden bemerken, wenn die Karte lädt alle Punkte zeigen und Filterung auf eigene scheint korrekt zu funktionieren. Jedoch, wenn Sie auf einen Filter klicken, (Projekt zum Beispiel), werden nur Projekte angezeigt, aber wenn Sie erneut darauf klicken, werden die Markierungen nicht zurückgesetzt. Wie auch, wenn Sie Nachrichten sagen klicken und dann Stuff, dann Stuff erneut auf, es zeigen wird nicht die Marker nur wieder Nachrichten Anwendung (noch zeigt Markierungen, die Nachrichten und Stuff für beide gelten, anstatt nur Nachrichten).

Alle Tipps würden sehr geschätzt werden.

Ich schaffe haben eine list-Artikel zu Filter die Markierungen auf klicken

<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> 

am unteren Rand meiner JS Sie werden sehen, wie folgt:

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

Antwort

1

In Ihre Schleife, um jeden Marker ein- und auszublenden. Für jeden einzelnen Marker überprüfen Sie nur, ob dieser Marker den angeklickten Filterwert hat. Sie müssen jeden Marker gegen jeden aktiven Filter prüfen.

$(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

+0

das ist genial, und danke, dass du Notizen hinterlassen hast! Ich schätze es sehr. Können Sie den Datumsfilter zufällig hinzufügen? – RMH

+0

@RMH Mein schlechtes. Ich arbeite jetzt daran. – Jaydo

+0

@RMH Aktualisiert die Antwort und die Geige. – Jaydo