javascript - 使用信息气泡显示/隐藏类别中的标记

Question

我有属于多个类别的标记，我希望能够使用复选框根据类别隐藏/显示标记。我已经让复选框在没有附加信息窗口的情况下工作，但是现在我附加了信息窗口，复选框不再起作用。我认为 show 和 hide 功能无法以某种方式访问​​ arrMarkers.category ，因为当我注释掉所有标记时都是可见的marker.setVisibile(false)。但是有了那条线，不知何故，第一个标记仍然可见，而其他所有标记都不......

这是我的代码，如果有人可以向我解释为什么它不起作用，那就太好了：

var markerData = [
                ['blueforce1', 52.308584, 4.767637, 1, 'yellow', 'yes'],
                ['blueforce2', 52.308656, 4.76517, 1, 'yellow', 'yes'],
                ['blueforce3', 52.308656, 4.72517, 1, 'yellow', 'yes'],
                ['blueforce4', 52.309686, 4.762734, 2, 'red', 'yes'],
                ['blueforce5', 52.309463, 4.771693, 2, 'red', 'yes'],
                ['blueforce6', 52.309963, 4.771693, 2, 'red', 'yes'],
                ['camera7', 52.308656, 4.76517, 3, 'camera', 'no'],
                ['blueforce8', 52.318656, 4.73517, 3, 'camera', 'no'],
            ];

function initialize()
        {
            var arrMarkers = [];

            var mapProp = { //set map properties
                    center:new google.maps.LatLng(52.309213,4.762316),
                    zoom:16,
                    mapTypeId:google.maps.MapTypeId.HYBRID
                    };

            //create map variable with properties       
            var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
for (i = 0; i < markerData.length; i++) {
                var pos = new google.maps.LatLng(markerData[i][1], markerData[i][2]);
                var title = markerData[i][0];
                var category = markerData[i][3];
                var new_marker = addMarker(pos, title, category);
                arrMarkers.push(new_marker);
                //new_marker[i].setVisible(false);
            }

            function addMarker (pos, title, category) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: pos,
                    icon: "mapIcons/marker_"+markerData[i][4]+".png",
                    category: category

                });  

                var infoBubble = new InfoBubble({
                    content: '<div class="phoneytext">' + title + '<div class="left-col2"></div></div>',
                    boxClass: 'info-box',
                    alignBottom: true,
                    pixelOffset: new google.maps.Size(-150, -40),
                    maxWidth: 300,
                    padding: 0,
                    closeBoxMargin: '0px',
                    borderColor: '#ffffff',
                    borderRadius: '0',
                    maxWidth: 535,
                    disableAutoPan: false,
                    hideCloseButton: false,
                    backgroundClassName: 'phoney'
                });

                google.maps.event.addListener(marker, 'click', function () { 
                    infoBubble.open(map, marker);
                    //console.log(infoBubble.content);
                });

                return marker;
            }






            //define click action for id 'open'
            google.maps.event.addDomListener(document.getElementById('open'),'click', function() {
                                infoBubble.open();
                                });

                //define click action for id 'closed'               
                google.maps.event.addDomListener(document.getElementById('close'),'click', function() {
                                infoBubble.close();
                                });

        }//end of initialize

            // == shows all markers of a particular category, and ensures the checkbox is checked ==
            function show(category) {
                for (var i=0; i<arrMarkers.length; i++) {
                    if (arrMarkers[i].category == category) {
                        arrMarkers[i].setVisible(true);
                    }
                }
                // == check the checkbox ==
                document.getElementById("cat"+category).checked = true;
            }

            // == hides all markers of a particular category, and ensures the checkbox is cleared ==
            function hide(category) {
                for (var i=0; i<arrMarkers.length; i++) {
                    if (arrMarkers[i].category == category) {
                        arrMarkers[i].setVisible(false);
                    }
                }
                // == clear the checkbox ==
                document.getElementById("cat"+category).checked = false;
                // == close the info window, in case its open on a marker that we just hid
                //infowindow.close();
            }

            // == a checkbox has been clicked ==
            function boxclick(box,category) {
                if (box.checked) {
                    show(category);
                }
                else {
                    hide(category);
                }
                }

HTML：

<form action="#">
    Blue Forces cat 1: <input type="checkbox" id="cat1" onclick="boxclick(this, 1)" checked/> &nbsp;&nbsp;
    Blue Forces cat 2: <input type="checkbox" id="cat2" onclick="boxclick(this, 2)" checked/> &nbsp;&nbsp;
    Cameras: <input type="checkbox" id="cat3" onclick="boxclick(this, 3)" /> &nbsp;&nbsp;
    </form>