javascript - 哪种循环结构可以将复选框矩阵与 Google map 标记进行比较？

Question

我正在尝试绘制我的城镇周围小径的 map 。

我使用 XML 文件来保存所有跟踪数据。对于每个标记，我都有“表面”、“难度”、“用途”等类别。

我见过许多使用复选框按类别显示标记的 Google map 示例。然而，这些示例通常非常简单:可能是三个不同的复选框。

我的不同之处在于我有多个类别，并且每个类别内都有多个可能的值。因此，特定路径可能具有“徒步旅行”、“骑自行车”、“慢跑”和“马术”的“使用”值，因为所有这些都是允许的。

我想要的是 map 仅显示与所有选中的值(而不是任何值)匹配的标记。

我对此进行了破解。您可以在此处查看结果:http://www.joshrenaud.com/pd/trails_withcheckboxes4.html

(我应该指出有一个错误，尽管加载时只检查一个类别，但所有标记都会显示。)

这不起作用。

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

我的具体问题:

1. 有没有人发现任何明显的问题导致我的第二个示例无法正常工作？

2. 如果没有，有人可以建议我需要构建哪种循环结构来将多个复选框数组与任何给定标记上的多个值数组进行比较吗？

这里是一些相关代码，尽管您可以查看上面示例的源代码来了解整个内容:

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();
        }
    }
}

Answer 1

好吧，没有人回复，但几天后我解决了自己的问题。基本上我想出的循环结构是正确的。但还有一些缺失的部分。

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

另外，最后我有 gmarkers[i].show(); 。应该是 gmarkers[k].show()。

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

if (surfaceChecked.length < 1) { surfaceOK = true; }

如果您想查看正在运行的代码，请转到此处:http://www.joshrenaud.com/pd/trails_withcheckboxes5.html

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

作为一名 javascript 新手，我确实遇到了一个调试工具，它对我产生了很大的影响，并帮助我发现了我的错误:www.webmonkey.com/2010/02/javascript_debugging_for_beginners/

使用这些 log();语句非常方便，尽管由于我的 javascript 中的所有嵌套循环，输出变得相当长。