Google Maps API3 - 过滤器(每个标记有多个选项)

时间:2016-12-06 12:52:13

标签: javascript google-maps google-maps-api-3

您好我已经设法让这个工作,所以标记加载并分配给每个标记。

过滤器的工作原理是匹配复选框和标记中的值,如果不相等,则标记的可见性设置为无。

我遇到的问题是复选框没有考虑其他复选框而我现在卡住了。

非常感谢任何指导帮助!

1 个答案:

答案 0 :(得分:1)

无论选中或取消选中哪个复选框,都需要迭代所有标记。您将需要使用下面给出的代码。它会检查每个标记的类别,并且只有在未选中适用于该标记的任何类别时才将其可见性设置为false。

/**
 * Function to filter markers by category
*/

$(".marker_filter").click(function() {

      for (i = 0; i < gmarkers1.length; i++) {
        marker = gmarkers1[i];
        var setVisible = false;
        for (j = 0; j < marker.category.length; j++) {
          setVisible = $("#" + marker.category[j]).is(":checked") || setVisible
        }

        marker.setVisible(setVisible);
      }
    });

您需要为复选框设置ID,并在HTML文件中默认选中它们。

<input type="checkbox" class="marker_filter" name="Option 1" value="option1" id="option1" checked/>
<input type="checkbox" class="marker_filter" name="Option 2" value="option2" id="option2" checked/>
<input type="checkbox" class="marker_filter" name="Option 3" value="option3" id="option3" checked/>

更新后的代码位于https://jsfiddle.net/emux5evL/5/