Question

我有一个谷歌地图标记的过滤功能，首先它完美地工作但是我想要一个多选框而不是该功能不再工作，因为输出是我认为的数组。

以下是一个工作示例：FIDDLE

这是filterMarker函数：

filterMarkers = function (category) {
  var selectedValue = $(".select-multiple").val();
  console.log($(".select-multiple").val(), category);

  for (i = 0; i < markers1.length; i++) {
    marker = gmarkers1[i];
    // If is same category or category not picked
    if (marker.category == selectedValue || category.length === 0) {
     // console.log('mcat', marker.category, 'cat', category);
          marker.setVisible(true);
    }
    // Categories don't match 
    else {
       marker.setVisible(false);
    }
 }
}

因此，我尝试通过选定的值进行forEach循环，然后检查它们是否与标记的类别匹配：

var foo = [];
$('.select-multiple :selected').each(function(i, selected){
   foo[i] = $(selected).val();
   var result = JSON.stringify(foo[i]);

   console.log(result);

   for (i = 0; i < markers1.length; i++) {
     marker = gmarkers1[i];
   // If is same category or category not picked
   if (marker.category == result || result.length === 0) {
    // console.log('mcat', marker.category, 'cat', category);
     marker.setVisible(true);
   }
  }
 });

我在filterMarkers function中做错了什么可以有人帮我解决这个问题？！

Answer 1

你非常接近。您必须检测是否选择了任何滤波器并清除或显示所有引脚，然后在循环中显示所选引脚。

filterMarkers = function(category) {

  // New - clear all markers or show all. If needed the selected markers will be made visible in following step.
  if ($('.select-multiple :selected').length > 0) {
    for (i = 0; i < markers1.length; i++) {
      gmarkers1[i].setVisible(false);
    }
  }
  else {
    for (i = 0; i < markers1.length; i++) {
      gmarkers1[i].setVisible(true);
    }
  }

  $('.select-multiple :selected').each(function(i, selected) {

    for (i = 0; i < markers1.length; i++) {
      marker = gmarkers1[i];
      // If is same category or category not picked
      if (marker.category == $(selected).val() ) {
        // console.log('mcat', marker.category, 'cat', category);
        marker.setVisible(true);
      }
    }
  });

}

注意 - 无法在此处运行代码段，因为我无法让Google地图链接生效。然而，OP的小提琴是有效的，如果你将上面的函数粘贴到他的同名函数上，那么它运行良好。相信我，我努力使用片段，但无法让它发挥。

jquery多个选择显示和隐藏谷歌地图标记

1 个答案: