фильтр по нескольким параметрам

182
24 февраля 2018, 20:51

Как изменить код так что бы он проверял и фильтровал значения не только по полностью совпадающим категориям с маркерами, а добавлял маркеры. На пример, если помечаю "second" и "car" появлялись три маркера так как к ним привязаны эти значения. http://jsfiddle.net/peter/drytwvL8/

var gmarkers1 = []; 
var markers1 = []; 
var infowindow = new google.maps.InfoWindow({ 
  content: '' 
}); 
// Our markers 
markers1 = [ 
  ['0', 'Title 1', 52.4357808, 4.991315699999973, ['car', 'second']], 
  ['1', 'Title 2', 52.4357808, 4.981315699999973, ['third']], 
  ['2', 'Title 3', 52.4555687, 5.039231599999994, ['car', 'third']], 
  ['3', 'Title 4', 52.4555687, 5.029231599999994, ['second']] 
]; 
markerCount = markers1.length 
// Function to init map 
function initialize() { 
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973); 
  var mapOptions = { 
    zoom: 12, 
    center: center, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
  }; 
 
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
  for (i = 0; i < markerCount; i++) { 
    addMarker(markers1[i]); 
  } 
} 
// Function to add marker to map 
function addMarker(marker) { 
  var category = marker[4]; 
  var title = marker[1]; 
  var pos = new google.maps.LatLng(marker[2], marker[3]); 
  var content = marker[1]; 
 
  marker1 = new google.maps.Marker({ 
    title: title, 
    position: pos, 
    category: category, 
    map: map 
  }); 
 
  gmarkers1.push(marker1); 
 
  // Marker click listener 
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) { 
    return function() { 
      console.log('Gmarker 1 gets pushed'); 
      infowindow.setContent(content); 
      infowindow.open(map, marker1); 
      map.panTo(this.getPosition()); 
      map.setZoom(15); 
    } 
  })(marker1, content)); 
} 
// Function on Change of checkbox 
updateView = function(element) { 
  if (element) { 
    //Get array with names of the checked boxes 
    checkedBoxes = ([...document.querySelectorAll('input[type=checkbox]:checked')]).map(function(o) { 
      return o.id; 
    }); 
    console.log(checkedBoxes); 
    for (i = 0; i < markerCount; i++) { 
      marker = gmarkers1[i]; 
      console.log(marker.category) 
      //Filter to show any markets containing ALL of the selected options 
      if (typeof marker.category == 'object' && checkedBoxes.every(function(o) { 
          return (marker.category).indexOf(o) >= 0; 
        })) { 
        marker.setVisible(true); 
      } else { 
        marker.setVisible(false); 
      } 
    } 
  } else { 
    console.log('No param given'); 
  } 
} 
// Init map 
initialize();
#map-canvas { 
    width: 500px; 
    height: 500px; 
}
<script src="https://maps.googleapis.com/maps/api/js?key=&v=3&language=ee&dummy=dummy.js"></script> 
<div id="map-canvas"></div> 
<div id="options"> 
  <input type="checkbox" id="car" onchange="updateView(this);"/> Car 
  <input type="checkbox" id="second" onchange="updateView(this);"/> Second 
  <input type="checkbox" id="third" onchange="updateView(this);"/> Third 
</div>

READ ALSO
Сортировка значений в таблице jquery

Сортировка значений в таблице jquery

Как сделать сортировку значений в таблицеЕсть две колонки в таблице в по которым нужно делать сортировку

246
добавление данных в выпадающий список

добавление данных в выпадающий список

Есть таблица tableЕсть input для ввода пользователем данных

168