多维滤波

我想同时使用“或”和“和”逻辑组合多种类型的滤波器。例如，我尝试过滤我的标记，如下例所示： http://codepen.io/patrickkunka/pen/ltgde 多维滤波

我已经放了多个标记，并且我创建了两个显示或隐藏标记的函数。问题是，如果我显示来自GroupA的标记，然后选择编号为1的标记，则我将拥有编号为1的所有标记。或者目标是同时具有来自GroupA和Number 1的标记。

对不起，这是simpest我可以将其降低到：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Multi-Filtering</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
     <div id="map" style="width: 500px; height: 400px;"></div> 
    <div id="multi_filters"> 
     <div class="Group"> 
     <a class="titre">Group</a></br> 
     <input type="checkbox" value="GroupA" onclick="displayGroup('GroupA');" checked> 
     <input type="checkbox" value="GroupB" onclick="displayGroup('GroupB');" checked> 
     </div> 
    </br> 
     <div class="Number"> 
     <a class="titre">Number</a></br> 
     <input type="checkbox" value="Number1" onclick="displayNumber(1);" checked> 
     <input type="checkbox" value="Number2" onclick="displayNumber(2);" checked> 
     </div> 
    </div> 
</body> 
</html>

和JavaScript：

var markers =[]; 
    var locations = [ 
     ['GroupA','Bondi Beach', -33.890542, 151.274856, 2], 
     ['GroupB','Coogee Beach', -33.923036, 151.259052, 2], 
     ['GroupA','Cronulla Beach', -34.028249, 151.157507, 1], 
     ['GroupB','Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
     ['GroupA','Maroubra Beach', -33.950198, 151.259302, 1] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.92, 151.25), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var marker, i; 
    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
     map: map 
     }); 
     marker.group= locations[i][0]; 
     marker.number = locations[i][4]; 
     markers.push(marker); 
    } 

    function displayGroup(group) { 
     var i; 
     for (i = 0; i < markers.length; i++) { 
     if (markers[i].group === group) { 
      if(!(markers[i].getVisible(true))){markers[i].setVisible(true);} 
      else{markers[i].setVisible(false);} 
     } 
     } 
    }; 

    function displayNumber(number) { 
     var i; 
     for (i = 0; i < markers.length; i++) { 
     if (markers[i].number === number) { 
      if(!(markers[i].getVisible(true))){markers[i].setVisible(true);} 
      else{markers[i].setVisible(false);} 
     } 
     } 
    };

任何帮助，不胜感激！谢谢

来源

2014-07-10 Vincent

复选框的使用，而不是点击按钮，然后你就可以选择多个条件。 –

谢谢你的帮助。我把复选框，但似乎这个问题似乎持续存在。例如，如果您取消选中所有复选框，则标记是可见的。 – Vincent

当然你必须改进你的过滤函数，看看我的答案。 –

可能的解决方案：

假设这样的标记（点击听众将在后面附后）：

<div id="multi_filters"> 
    <div class="Group"> 
    <a class="titre">Group</a></br> 
    A<input type="checkbox" value="GroupA" data-prop="group" checked/> 
    B<input type="checkbox" value="GroupB" data-prop="group"/> 
    </div> 
</br> 
    <div class="Number"> 
    <a class="titre">Number</a></br> 
    1<input type="checkbox" value="1" data-prop="number" checked/> 
    2<input type="checkbox" value="2" data-prop="number"/> 
    </div> 
</div>

的属性应该是自我解释，data-prop是存储在属性名称为标记，并且value要测试的属性的值。

以下脚本根据选中的复选框创建将存储在对象中的正则表达式。

(function(boxes){ 

    for(var i=0;i<boxes.length;++i){ 
     //add click-listener for the checkboxes 
     google.maps.event.addDomListener(boxes[i],'click',function(){ 
     var props={},box,prop,val,any,marker; 
     for(var i=0;i<boxes.length;++i){ 
      box=boxes[i]; 
      prop=box.getAttribute('data-prop'); 
      val=box.value; 

      if(box.checked){ 
      //variable to determine if there is any checkbox checked 
      any=true; 
      //populate an object with arrays 
      //(key is the property-name) 
      if(!props[prop]){ 
       props[prop]=[]; 
      } 
      //push the value to the particular array 
      props[prop].push(val); 
      } 
     } 
     //create RegExp's from the arrays 
     for(var k in props){ 
      props[k]=new RegExp('^('+props[k].join('|')+')$'); 
     } 
     //iterate over the markers 
     for(var m=0;m<markers.length;++m){ 
      marker=markers[m]; 
      //no checkbox is checked, hide all markers 
      if(!any){ 
      marker.setMap(null); 
      } 
      //there is a condition, check it 
      else{ 
      inner: 
      //iterate over the RegExp's 
      for(var k in props){ 
       //if condition doesn't match hide marker and run next loop 
       if(!String(marker[k]).match(props[k])){ 
       marker.setMap(null); 
       break inner; 
       } 
       //all RegExp's match, show the marker 
       marker.setMap(map); 
      } 
      } 
     } 
     }); 
    } 
    if(boxes.length){ 
     //trigger the event to apply the initial marker-state 
     google.maps.event.trigger(boxes[0],'click',{}) 
    } 
    })(document.querySelectorAll('input[data-prop]'));

对于给定的标记（组：GroupA和编号：1被检查），结果条件例如将是：

{group:/^(GroupA)$/,number:/^(1)$/}

脚本将运行这些条件，如果有任何失败，则隐藏标记，否则显示标记。

演示：http://jsfiddle.net/doktormolle/QyMLg/

来源

2014-07-11 17:12:09

非常感谢Dr.Molle对你的帮助。你的解释非常清楚和教育:) – Vincent

回答

相关问题