Javascript Google地图标记的奇数过滤行为

更新示例：

您可以单击标记

按住Ctrl键可选择多个选项

更新： 我进一步修改了脚本，并将jQuery.inArray替换为array_diff函数，作为ifs中的测试语句

我还稍微改变了if逻辑。我尝试了新的代码，只对房屋进行过滤，似乎效果不错，但当我也为公寓启用相同的过滤代码时，过滤会有点混乱

例如：如果我从Features中选择所有内容，则地图上不会显示任何内容。但是一些标记应该已经出现了，因为我至少有两个标记具有三种可用功能

$(markers.houses).each(function(index, elem) {
        if ((array_diff(selectedFeatures, elem.features).length === 0) && (array_diff(selectedNearby, elem.nearby).length === 0)) {
            if (!markers.houseMarkers[index].visible) {
                markers.houseMarkers[index].setVisible(true);
            }
        }
    });
$(markers.condos).each(function(index, elem) {
        if ((array_diff(selectedFeatures, elem.features).length === 0) && (array_diff(selectedNearby, elem.nearby).length === 0)) {
            if (!markers.condoMarkers[index].visible) {
                markers.condoMarkers[index].setVisible(true);
            }
        }
    });

图1.1-房屋和公寓的过滤代码片段

您在此处输入了一个可能与此有关的SelectedFeatures：

 if (jQuery.inArray(selectedFeaturess[i], elem.features) !== -1 || jQuery.inArray(selectedFeatures[i], elem.features) > -1) {

我想这也不会有什么帮助：

<option value="Wendy's">Harveys</option>

可以简化为：

if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {

因为如果它大于-1，那么它就是！==-1，所以第2条是多余的。e、 g.如果it=0，则会触发if子句的第一部分，并且不需要执行if语句的第二部分

最后，这里是对$document.ready函数的重写。主要问题是如何在数组中的元素上循环。不要将它们视为jquery选择器并在它们上执行.each命令，您只需要执行一个简单的For循环。但是您可以使用jquery选择器来检查它们的长度。这对我来说很管用。我还在选项中将温迪的更名为Harveys

$(document).ready(function() {
    //$('#filter').on('click', function(e) {
    $('#filter').click(function(e) {
        // prevent refreshing of the page
        e.preventDefault();

        // close all infoWindows
        infowindow.close();

        // hide all markers
        $(markers.houses).each(function(index, elem) {
            markers.houseMarkers[index].setVisible(false);
        });
        $(markers.condos).each(function(index, elem) {
            markers.condoMarkers[index].setVisible(false);
        });

        // get the selected features from select box
        var selectedFeatures = $("#features").val();
        var selectedNearby = $("#nearby").val();

        // for each house element...
        $(markers.houses).each(function(index, elem) {
            //first filter by selected features
            if ($(selectedFeatures).length) {
                for (var i = 0; i < selectedFeatures.length; i++) {       
                    if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {    
                        if (!markers.houseMarkers[index].visible) {
                            markers.houseMarkers[index].setVisible(true);
                        }
                    }
                }
            }

            //then filter by nearby selections
            if ($(selectedNearby).length) {
                for (var i = 0; i < selectedNearby.length; i++) {
                    if (jQuery.inArray(selectedNearby[i], elem.nearby) !== -1) {
                        // if marker is not visible, but meets the filtering criteria - show it
                        // otherwise leave it as it is
                        if (!markers.houseMarkers[index].visible) {
                            markers.houseMarkers[index].setVisible(true);
                        }
                    }
                }
            }
        });

        // for each condo element...
        $(markers.condos).each(function(index, elem) {

            // first filter by selected features
            if ($(selectedFeatures).length) {
                 for (var i = 0; i < selectedFeatures.length; i++) {       
                    if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {
                        // if marker is not visible, but meets the filtering criteria - show it
                        // otherwise leave it as it is
                        if (!markers.condoMarkers[index].visible) {
                            markers.condoMarkers[index].setVisible(true);
                        }
                    }
                }
            }

            //then filter by nearby selections
            if ($(selectedNearby).length) {
                for (var i = 0; i < selectedNearby.length; i++) {
                    if (jQuery.inArray(selectedNearby[i], elem.nearby) !== -1) {
                        // if marker is not visible, but meets the filtering criteria - show it
                        // otherwise leave it as it is
                        if (!markers.condoMarkers[index].visible) {
                            markers.condoMarkers[index].setVisible(true);
                        }
                    }
                }
            }
        });
    });
});

---

我建议广泛使用console.log来尝试并弄清楚您的应用程序执行的每个阶段都发生了什么filtering@duncan：真的吗？我自己也不会这么想。那么日志记录的结果告诉你了吗？@duncan:selectedFeatures如果在Features框中未选择任何内容，或者如果Features框和附近的框中均未选择任何内容，则selectedFeatures为空。如果“附近”框中未选择任何内容，则SelectedNearest为空。如果功能和附近都选择了某些内容，则不会定义selectedFeatures。这解决了公寓标记未显示的问题，但其余问题仍然存在。

$(document).ready(function() {
    //$('#filter').on('click', function(e) {
    $('#filter').click(function(e) {
        // prevent refreshing of the page
        e.preventDefault();

        // close all infoWindows
        infowindow.close();

        // hide all markers
        $(markers.houses).each(function(index, elem) {
            markers.houseMarkers[index].setVisible(false);
        });
        $(markers.condos).each(function(index, elem) {
            markers.condoMarkers[index].setVisible(false);
        });

        // get the selected features from select box
        var selectedFeatures = $("#features").val();
        var selectedNearby = $("#nearby").val();

        // for each house element...
        $(markers.houses).each(function(index, elem) {
            //first filter by selected features
            if ($(selectedFeatures).length) {
                for (var i = 0; i < selectedFeatures.length; i++) {       
                    if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {    
                        if (!markers.houseMarkers[index].visible) {
                            markers.houseMarkers[index].setVisible(true);
                        }
                    }
                }
            }

            //then filter by nearby selections
            if ($(selectedNearby).length) {
                for (var i = 0; i < selectedNearby.length; i++) {
                    if (jQuery.inArray(selectedNearby[i], elem.nearby) !== -1) {
                        // if marker is not visible, but meets the filtering criteria - show it
                        // otherwise leave it as it is
                        if (!markers.houseMarkers[index].visible) {
                            markers.houseMarkers[index].setVisible(true);
                        }
                    }
                }
            }
        });

        // for each condo element...
        $(markers.condos).each(function(index, elem) {

            // first filter by selected features
            if ($(selectedFeatures).length) {
                 for (var i = 0; i < selectedFeatures.length; i++) {       
                    if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {
                        // if marker is not visible, but meets the filtering criteria - show it
                        // otherwise leave it as it is
                        if (!markers.condoMarkers[index].visible) {
                            markers.condoMarkers[index].setVisible(true);
                        }
                    }
                }
            }

            //then filter by nearby selections
            if ($(selectedNearby).length) {
                for (var i = 0; i < selectedNearby.length; i++) {
                    if (jQuery.inArray(selectedNearby[i], elem.nearby) !== -1) {
                        // if marker is not visible, but meets the filtering criteria - show it
                        // otherwise leave it as it is
                        if (!markers.condoMarkers[index].visible) {
                            markers.condoMarkers[index].setVisible(true);
                        }
                    }
                }
            }
        });
    });
});