Javascript 什么样的循环结构可以将复选框矩阵与谷歌地图标记进行比较？

我想在我的镇上画一张小径地图

我正在使用一个XML文件来保存所有的跟踪数据。对于每个标记，我有一些类别，如表面、难度、用途等

我见过许多谷歌地图的例子，它们使用复选框按类别显示标记。然而，这些例子通常非常简单：可能有三个不同的复选框

我的不同之处在于我有多个类别，每个类别中都有几个可能的值。因此，一条特定的小径可能具有徒步、骑自行车、慢跑和骑马的使用价值，因为所有这些都是允许的

我希望地图只显示与所有选中值匹配的标记，而不是任何标记

我对这件事很反感。您可以在此处看到结果：

我应该指出有一个bug，尽管加载时只检查了一个类别，但所有标记都会显示出来

它不起作用

我对Javascript非常陌生，所以我确信我做了一些完全错误的事情，但我不知道是什么

我的具体问题：

有没有人看到任何明显的东西使我的第二个例子无法工作

如果没有，有人能建议我需要构建什么样的循环结构来比较任何给定标记上的几个复选框数组和几个值数组吗

下面是一些相关代码，尽管您可以查看上面示例的源代码来了解全部内容：

function createMarker(point,surface,difficulty,use,html) {
    var marker = new GMarker(point,GIcon);
    marker.mysurface = surface;
    marker.mydifficulty = difficulty;
    marker.myuse = use;
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
    gmarkers.push(marker);
    return marker;
}

function show() {
    hide();

    var surfaceChecked = [];
    var difficultyChecked = [];
    var useChecked = [];
    var j=0;

    // okay, let's run through the checkbox elements and make arrays to serve as holders of any values the user has checked.
    for (i=0; i<surfaceArray.length; i++) {
        if (document.getElementById('surface'+surfaceArray[i]).checked == true) {
            surfaceChecked[j] = surfaceArray[i];
            j++;
        }
    }
    j=0;
    for (i=0; i<difficultyArray.length; i++) {
        if (document.getElementById('difficulty'+difficultyArray[i]).checked == true) {
            difficultyChecked[j] = difficultyArray[i];
            j++;
        }
    }
    j=0;
    for (i=0; i<useArray.length; i++) {
        if (document.getElementById('use'+useArray[i]).checked == true) {
            useChecked[j] = useArray[i];
            j++;
        }
    }


    //now that we have our 'xxxChecked' holders, it's time to go through all the markers and see which to show.

    for (var k=0; k<gmarkers.length; k++) { // this loop runs thru all markers
        var surfaceMatches = [];
        var difficultyMatches = [];
        var useMatches = [];
        var surfaceOK = false;
        var difficultyOK = false;
        var useOK = false;

        for (var l=0; l<surfaceChecked.length; l++) { // this loops runs through all checked Surface categories
            for (var m=0; m<gmarkers[k].mysurface.length; m++) { // this loops through all surfaces on the marker
                if (gmarkers[k].mysurface[m].childNodes[0].nodeValue == surfaceChecked[l]) {
                    surfaceMatches[l] = true;
                }
            }
        }
        for (l=0; l<difficultyChecked.length; l++) { // this loops runs through all checked Difficulty categories
            for (m=0; m<gmarkers[k].mydifficulty.length; m++) { // this loops through all difficulties on the marker
                if (gmarkers[k].mydifficulty[m].childNodes[0].nodeValue == difficultyChecked[l]) {
                    difficultyMatches[l] = true;
                }
            }
        }
        for (l=0; l<useChecked.length; l++) { // this loops runs through all checked Use categories
            for (m=0; m<gmarkers[k].myuse.length; m++) { // this loops through all uses on the marker
                if (gmarkers[k].myuse[m].childNodes[0].nodeValue == useChecked[l]) {
                    useMatches[l] = true;
                }
            }
        }
        // now it's time to loop thru the Match arrays and make sure they are all completely true.
        for (m=0; m<surfaceMatches.length; m++) {
            if (surfaceMatches[m] == true) { surfaceOK = true; }
            else if (surfaceMatches[m] == false) {surfaceOK = false; break; }
        }
        for (m=0; m<difficultyMatches.length; m++) {
            if (difficultyMatches[m] == true) { difficultyOK = true; }
            else if (difficultyMatches[m] == false) {difficultyOK = false; break; }
        }
        for (m=0; m<useMatches.length; m++) {
            if (useMatches[m] == true) { useOK = true; }
            else if (useMatches[m] == false) {useOK = false; break; }
        }
        // And finally, if each of the three OK's is true, then let's show the marker.
        if ((surfaceOK == true) && (difficultyOK == true) && (useOK == true)) {
            gmarkers[i].show();
        }
    }
}

---

没人回应，但几天后我解决了自己的问题。我提出的循环结构基本上是正确的。但有几件丢失了

我在几个if语句中添加了break语句。因为对于给定的类别，每个标记可能有多个值，所以它可能会循环一次并找到匹配项，然后将surfaceMatches标志设置为true。但是它会再次循环检查类别中的下一个值，发现它不匹配，并将标志设置为false。因此，在类别匹配后，插入中断导致for循环停止

而且，最后我有了gmarkers[I].show。应该是gmarkers[k]。秀

最后，我意识到当我设置分类OK标志时，我将它们全部设置为false。这没关系，只是如果用户将某个特定类别留空怎么办？然后匹配的循环将永远不会执行，并且标志将保持为false。因此，我添加了一些语句来检查类别是否未检查任何值，然后将OK标志设置为true，如下所示：

如果surfaceChecked.length<1{surfaceOK=true；}

如果您想查看代码的运行情况，请转到此处：

可能没人关心这些。但这可能会有所帮助：

作为一名javascript新手，我确实遇到了一个调试工具，它让我与众不同，并帮助我发现了错误：www.webmonkey.com/2010/02/javascript\u debuging\u for\u初学者/

---

使用这些日志；语句非常方便，尽管javascript中的所有嵌套循环的输出都很长。

我使用“另存链接为…”。。要将链接保存到我的桌面上，但当我从浏览器打开它时，所有标记都没有显示。有什么原因吗？这是安全问题。地图请求一个XML文件，大多数浏览器不允许您在本地执行。