XML 生成的 Google 地图上的复选框过滤器

Question

我很难尝试为以下代码设置复选框过滤器，因为整个代码量很大，所以减少了。一切正常，除了这些复选框过滤器。标记都是从 php 生成的 xml 文件中提取的，就像在 Google 的示例中一样。

我认为这是因为标记文件是一个 object HTMLCollection 而我得到的 markers[i].setVisible 不是a function 我已经尝试了很多东西，但它超出了我的知识范围。对于我的最后一步，我真的很感激能得到一些帮助。

示例XML数据

<marker name="Some Shop" id="2" type="shops" description="Great shop" street_number="350" street_name="Main Road" suburb="Lovely ville" lat="-23.9544011" lng="156.1895873" from="2014-01-01 01:00:00" to="2015-10-01 01:00:00"/>

Javascript

downloadUrl("xml_generator.php", function (data) {

                var xml = data.responseXML;

                var markers = xml.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {

                    var type = markers[i].getAttribute("type");

                    var marker = new google.maps.Marker({
                        map: map,
                        position: point,
                        icon: icon.icon
                    });

                    bindInfoBox(marker, map, ib, myOptions);

                }

        $(document).ready(function(){
        // == shows all markers of a particular category, and ensures the checkbox is checked ==
        function show(category) {
            window.alert("Show " + category + markers);
            for (var i=0; i<markers.length; i++) {
                if (markers[i].getAttribute("type") == category) {
                    markers[i].setVisible(true);
                }
            }
        }

        // == hides all markers of a particular category, and ensures the checkbox is cleared ==
        function hide(category) {
            window.alert("Hide " + category);
            for (var i=0; i<markers.length; i++) {
                if (markers[i].getAttribute("type") == category) {
                    markers[i].setVisible(true);
                }
            }

        }

        $(".toggle").click(function(){
            var cat = $(this).attr("value");
            // If checked
            if ($(this).is(":checked"))
            {
                show(cat);
            } else
            {
                hide(cat);
            }
        });

    });

            });

然后 HTML 复选框

<input value="shops" class="toggle" type="checkbox" checked="yes">

Answer 1

markers[i] 是一个 HTMLElement 对象（或 XMLElement）。它没有 setVisible 方法。

您想要一个不同的 "gmarkers" google.maps.Marker 对象数组，如下所示：

            var xml = data.responseXML;

            var markers = xml.documentElement.getElementsByTagName("marker");

            for (var i = 0; i < markers.length; i++) {

                var type = markers[i].getAttribute("type");

                var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon
                });

                bindInfoBox(marker, map, ib, myOptions);
                gmarkers.push(marker);  //*****

            }

XML 生成的 Google 地图上的复选框过滤器

Checkbox Filters on XML Generated Google Map

javascript

xml

checkbox

google-maps

google-maps-api-3