篩選谷歌地圖標記由多個類別的組

Question

我設法通過瀏覽本網站按類別過濾標記。不過，當我需要過濾多組類別時，我會卡住。

喜歡的東西：

類型：1型，2型，3型，4型

類：1類，2類，3類

這裏是我有到目前爲止，（做那麼簡單，因爲我可以）：http://jsbin.com/rahur/1/edit?html,js,output

爲了看一眼這裏的主要部分：

 for (i = 0; i < markers.length; i++) { 
      var pos = new google.maps.LatLng(markers[i][0], markers[i][1]); 
      bounds.extend(pos); 
      marker = new google.maps.Marker({ 
       position:pos, 
       map:map, 
       'sgroup': markers[i][3]['sgroup'], 
       'sclass': markers[i][3]['sclass'], 
       'stype': markers[i][3]['stype'] 
      }); 

      markersType.push(marker); 
     } 
    function toggleMarkers(category, visible) { 
       jQuery(markersType).each(function(id, marker) { 
        if (jQuery.inArray(category, marker.stype) != -1) 
         marker.setVisible(visible); 
       }); 
      } 
    $("#type-school-list input:checkbox").click(function() { 
      $('#type-school-list input:checkbox').each(function() { 
       toggleMarkers($(this).val(), $(this).is(":checked")); 
      }); 
    }); 

不知道我是否在正確的軌道上，因爲我嘗試過的幾件事情無法正常工作。如果你能指出我正確的方向，我會非常感激。

謝謝！

Answer 1

我有三個不同的類別所面臨的同樣的問題，這是我的解決方案：

Javascript 
<script> 

var markers = []; 
var iterator = 0; 
    var line = [] 


function initialize(){ 
     var i; 
     var infowindowArr = []; 
     var chania = new google.maps.LatLng(35.513829800000000000,24.018036700000040000); 
     var mapOptions = { 
      zoom: 11, 
      center: chania 
      } 

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     var newMarker; 
     var image = 'some url'; 

     function addMarker() { 
      newMarker = new google.maps.Marker({ 
       position: new google.maps.LatLng(line[iterator][1],line[iterator][0]), 
       map: map, 
       title: line[iterator][2], 
       animation: google.maps.Animation.DROP, 
       icon: image 
      }); 
      newMarker.period = line[iterator][4]; 
      newMarker.category = line[iterator][5]; 
      newMarker.section = line[iterator][6]; 

      newMarker.setVisible(true); 

       google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(marker.get('map'), marker); 
       }); 
      }   
      markers.push(newMarker); 
      iterator++; 
     } 

     for (i = 0; i < line.length; i++) { 
     setTimeout(function() { 
      addMarker(); 

     }, i * 50); 
     } 

    } 



google.maps.event.addDomListener(window, 'load', initialize); 
//each array of this array has number of fields equal to the number of filters for its filter category, its makes more sense if you see the html code 
var filtersArr = [ 
[false,false,false,false,false,false,false,false], 
[false,false,false,false,false,false,false,false,false,false,false,false,false,false], 
[false,false,false,false,false,false,false] 
]; 


function filterMarkers(event) 
{ 
    //hide all markers 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setVisible(false);   
    } 

    //get checkbox clicked value and id 
    event = event || window.event; // IE 
    var target = event.target || event.srcElement; // IE 
    var pos; 
    var arr = target.value; 

    // Get the array filter position (and set it true or false) from the checkbox id. 

如果看到HTML我希望你能找出什麼IM在這裏做。它不是很好，但我有一個截止日期，所以我不必做更好的事情。

if (arr == 1) { 
     pos = target.id - 8; 
    } else if (arr == 2) { 
     pos = target.id - 22; 
    } else { 
     pos = target.id; 
    } 
    //update filtersArray 
    if (document.getElementById(target.id).checked) { 

     filtersArr[arr][pos] = true; 
    } else { 
     filtersArr[arr][pos] = false; 
    } 

這裏是算法部分，基本上是什麼給你正確過濾標記。

//existing filters scenario 
    if (isUnchecked(filtersArr[0]) == true && isUnchecked(filtersArr[1]) == false && isUnchecked(filtersArr[2]) == false) { 
     for (i = 0; i < markers.length; i++) { 
      if (filtersArr[1][markers[i].category] == true && filtersArr[2][markers[i].section] == true) { 
       markers[i].setVisible(true); 
      } 
     } 
    } 
    else if (isUnchecked(filtersArr[1]) == true && isUnchecked(filtersArr[0]) == false && isUnchecked(filtersArr[2]) == false) { 
     for (i = 0; i < markers.length; i++) { 
      if (filtersArr[0][markers[i].period] == true && filtersArr[2][markers[i].section] == true) { 
       markers[i].setVisible(true); 
      } 
     } 
    } 
    else if (isUnchecked(filtersArr[2]) == true && isUnchecked(filtersArr[0]) == false && isUnchecked(filtersArr[1]) == false) { 
     for (i = 0; i < markers.length; i++) { 
      if (filtersArr[0][markers[i].period] == true && filtersArr[1][markers[i].category] == true) { 
       markers[i].setVisible(true); 
      } 
     } 
    } 
    else if (isUnchecked(filtersArr[0]) == true && isUnchecked(filtersArr[1]) == false && isUnchecked(filtersArr[2]) == true) {//true,true,false Scenario 
     for (i = 0; i < markers.length; i++) { 
      if (filtersArr[1][markers[i].category] == true) { 
       markers[i].setVisible(true); 
      } 
     } 
    } 
    else if (isUnchecked(filtersArr[0]) == true && isUnchecked(filtersArr[1]) == true && isUnchecked(filtersArr[2]) == false) { 
     for (i = 0; i < markers.length; i++) { 
      if (filtersArr[2][markers[i].section] == true) { 
       markers[i].setVisible(true); 
      } 
     } 
    } 
    else if (isUnchecked(filtersArr[1]) == true && isUnchecked(filtersArr[0]) == false && isUnchecked(filtersArr[2]) == true) { 
     for (i = 0; i < markers.length; i++) { 
      if (filtersArr[0][markers[i].period] == true) { 
       markers[i].setVisible(true); 
      } 
     } 
    } 
    else if (isUnchecked(filtersArr[0]) == false && isUnchecked(filtersArr[1]) == false && isUnchecked(filtersArr[2]) == false) {//false,false,false Scenario 

     for (i = 0; i < markers.length; i++) { 
      if (filtersArr[0][markers[i].period] == true && filtersArr[1][markers[i].category] == true && filtersArr[2][markers[i].section] == true ) { 
       markers[i].setVisible(true); 
      } 
     } 
    } 

} 

檢查一個類別的所有的過濾器是一種功能選中

//checks if an array (filter category) is unchecked 
function isUnchecked(arr) 
{ 
var j; 
    for(j=0;j<arr.length;j++) { 
     if (arr[j] == true) { 
      return false; 
     } 
    } 
    return true; 
} 

HTML

<body> 

<div id="map-canvas"></div> 

<div id="filters"> 

<span id="perOptions"> 
<h4 style="color:#dd6303;font-family:roboto !important;font-size:14px;">Ιστορική Περίοδος</h4><input type="checkbox" id="0" value="0" onclick="filterMarkers(event);">Βυζαντινή περίοδος </br> 
    <input type="checkbox" id="1" value="0" onclick="filterMarkers(event);">Ενετική περίοδος</br> 
    <input type="checkbox" id="2" value="0" onclick="filterMarkers(event)"> 
    <input type="checkbox" id="3" value="0" onclick="filterMarkers(event)">Κρητική πολιτεία</br> 
    <input type="checkbox" id="4" value="0" onclick="filterMarkers(event)">Νεώτεροι χρόνοι </br> 
    <input type="checkbox" id="5" value="0" onclick="filterMarkers(event)">Προϊστορικοί περίοδος</br> 
    <input type="checkbox" id="6" value="0" onclick="filterMarkers(event)">Οθωμανική κυριαρχία</br> 
    <input type="checkbox" id="7" value="0" onclick="filterMarkers(event)">Γεωμετρική Περίοδος</br> 

    </span> 

    <span id="kindOptions"> 
    <h4 style="color:#dd6303;font-family:roboto !important;font- size:14px;">Κατηγορία</h4> 
    <input type="checkbox" id="8" value="1" onclick="filterMarkers(event);">Αρχαιολογικός χώρος</br> 
    <input type="checkbox" id="9" value="1" onclick="filterMarkers(event);" >Εκκλησία</br> 
    <input type="checkbox" id="10" value="1" onclick="filterMarkers(event);">Πλατεία</br> 
    <input type="checkbox" id="11" value="1" onclick="filterMarkers(event);" >Αρχιτεκτονικό Μνημείο</br> 
    <input type="checkbox" id="12" value="1" onclick="filterMarkers(event);">Μουσείο</br> 
    <input type="checkbox" id="13" value="1" onclick="filterMarkers(event);">Τζαμί</br> 
    <input type="checkbox" id="14" value="1" onclick="filterMarkers(event);" >Ιστορική Συνοικία</br> 
    <input type="checkbox" id="15" value="1" onclick="filterMarkers(event);">Ιστορική Συνοικία/</br>Αρχιτεκτονικό Μνημείο</br> 
    <input type="checkbox" id="16" value="1" onclick="filterMarkers(event);">Φρούριο</br> 
    <input type="checkbox" id="17" value="1" onclick="filterMarkers(event);">Χαμάμ</br> 
    <input type="checkbox" id="18" value="1" onclick="filterMarkers(event);">Κρήνη</br> 
    <input type="checkbox" id="19" value="1" onclick="filterMarkers(event);">Αρχιτεκτονικό /</br> Πολιτιστικό Μνημείο</br> 
    <input type="checkbox" id="20" value="1" onclick="filterMarkers(event);">Ιστορικοί Οδοί</br> 
    <input type="checkbox" id="21" value="1" onclick="filterMarkers(event);">Πινακοθήκη</br> 

    </span> 

    <span id="areaOptions"> 
    <h4 style="color:#dd6303;font-family:roboto !important;font-size:14px;">Δημοτική  Ενότητα</h4> 
<input type="checkbox" id="22" value="2" onclick="filterMarkers(event);">Χανίων</br> 
    <input type="checkbox" id="23" value="2" onclick="filterMarkers(event);" >Ακρωτηρίου</br> 
    <input type="checkbox" id="24" value="2" onclick="filterMarkers(event);">Σούδας</br> 
    <input type="checkbox" id="25" value="2" onclick="filterMarkers(event);">Θερίσου</br> 
    <input type="checkbox" id="26" value="2" onclick="filterMarkers(event);" >Κεραμειών 
    </span> 
    </div> 

    </body>