javascript - 为什么 marker.setVisible(false) 仅适用于最新标记而不适用于所有标记？

Question

我在使用 google map 时遇到问题，我无法使用 setVisible (false) 函数删除 map 标记。

为什么 ma​​rker.setVisible(false) 不适用于所有标记？

Answer 1

完整代码:

<style>html, body {height: 100%;margin: 0;padding: 0;}#map {height: 100%;width: 70%;margin-left: 30%;border: 1px solid #ddd;}</style>
    <input type="text" id="nameTheme">
    <input type="button" name="bt" id="bt" onclick="searchByTheme()" value="Search">
    <div id="map"></div>

    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?language=en&libraries=geometry,places&key=AIzaSyA-AB-9XZd-iQby-bNLYPFyb0pR2Qw3orw"></script>
    <script>


        var infowindow;
        var map;
        var red_icon =  'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
        var purple_icon =  'http://maps.google.com/mapfiles/ms/icons/purple-dot.png';

        //variable where marker values ​​are saved
        var locations = [["12","-6.888048","-38.567562","Event name 1","theme 1","2018-08-13","2018-08-17","1","3"],["13","-6.889559","-38.545033","Event name 2","theme 2","2018-08-13","2018-08-15","1","3"],["14","-6.890481","-38.544441","Event name 3","theme 3","2018-08-15","2018-08-23","1","3"]];


        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -6.889320, lng: -38.553678},
            zoom: 14,
        });
        infoWindow = new google.maps.InfoWindow;

        var markers = {};

        var i ; var confirmed = 0;
        for (var i = locations.length - 1; i >= 0; i--) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon :   locations[i][7] === '1' ?  red_icon  : purple_icon,
                html: "<div>\n" +
                "<table class=\"map1\">\n" +
                "<tr>\n" +
                "<td><a>Título:</a></td>\n" +
                "<td><input disabled id='manual_title' placeholder='" + locations[i][3]+"'></td></tr>\n" +
                "</table>\n" +
                "</div>"
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow = new google.maps.InfoWindow();
                    confirmed =  locations[i][7] === '1' ?  'checked'  :  0;
                    $("#confirmed").prop(confirmed,locations[i][7]);
                    $("#id").val(locations[i][0]);
                    $("#title").val(locations[i][3]);
                    $("#form").show();
                    infowindow.setContent(marker.html);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }


        function searchByTheme(){
            var i ; var confirmed = 0;

            for (var i = locations.length - 1; i >= 0; i--) {
                if(locations[i][4] == nameTheme.value){
                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon :   locations[i][7] === '1' ?  purple_icon  : red_icon,
                    html: "<div>\n" +
                    "<table class=\"map1\">\n" +
                    "<tr>\n" +
                    "<td><a>Título:</a></td>\n" +
                    "<td><input disabled id='manual_title' placeholder='" + locations[i][3]+"'></td></tr>\n" +
                    "</table>\n" +
                    "</div>"
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow = new google.maps.InfoWindow();
                        confirmed =  locations[i][7] === '1' ?  'checked'  :  0;
                        $("#confirmed").prop(confirmed,locations[i][7]);
                        $("#id").val(locations[i][0]);
                        $("#title").val(locations[i][3]);
                        $("#form").show();
                        infowindow.setContent(marker.html);
                        infowindow.open(map, marker);
                    }
                })(marker, i));

                } else {
                    marker.setVisible(false );
                }
            }
        }

    </script>