谷歌地图多个下拉过滤器协同工作

Question

我正在尝试使用两个或更多下拉菜单过滤谷歌地图上的标记。问题是下拉过滤器不会相互过滤。当我更改一个下拉列表的值并过滤掉标记时，第二个过滤器不会过滤掉第一个过滤器显示的标记，而是过滤所有标记。任何帮助，将不胜感激！

JS：

//global variables
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});

//add the shipwreck data
markers1 = [
  ["Name","Latitude","Longitude","Year","Type","Type_of_Loss"  ],
  ["Bermuda","46.46483333","-86.64683333","1870","Schooner","Storm"  ],
  ["George","46.516","-86.52083333","1893","Schooner","Storm"  ],
  ["Herman H. Hettler","46.48383333","-86.59966667","1926","Propeller","Storm"  ],
  ["Kiowa","46.64516667","-86.22016667","1929","Propeller","Storm"  ],

];


//initiate the map
function initMap() {
    // Our markers


    var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
    var mapOptions = {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };



    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }

}


//add markers to the map
function addMarker(marker) {    
    var category_type = marker[4];
    var category_loss = marker[5];
    var category_year = marker[0];
    var title = marker[0];
    var pos = new google.maps.LatLng(marker[1], marker[2]);
    var content = marker[0];

    marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        //setup the categories for the different mark types
        category_type: category_type,
        category_loss: category_loss,
        category_year: category_year,
        map: map
    });

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
        return function () {
            console.log('Gmarker 1 gets pushed');
            infowindow.setContent(content);
            infowindow.open(map, marker1);
            map.panTo(this.getPosition());
            map.setZoom(15);
        }
    })(marker1, content));
}


//filter the markers by type of ship
filterMarkers = function (category_type) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category_type == category_type || category_type.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

//filter the markers by type of loss
filterMarkers2 = function (category_loss) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category_loss == category_loss || category_loss.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }

    }
}

// Init map
initMap();

HTML：

<div class="container-fluid">
    <div class="row">    
        <div class="sidebar col-xs-3">
                        <h2>Filter Shipwrecks</h2>
                        <div class="filter-options">
                            <div class="filter-set" style="margin-top:0;">
                                <button id="load-btn" class="load-btn button is-success">Reload data</button>
                            </div>
                            <div class="filter-set">
                                <label for="ship-select">Ship Type:</label>
                                <select id="type" onchange="filterMarkers(this.value);">
                                <option value="">Any</option>
                                <option value="Barge">Barge</option>
                                <option value="Freighter">Freighter</option>
                                <option value="Propeller">Propeller</option>
                                <option value="Schooner">Schooner</option>
                                <option value="Steamer">Steamer</option>    
                            </select>
                            </div>
                            <div class="filter-set">
                                <label for="ship-select">Type of Loss:</label>
                                <select id="type" onchange="filterMarkers2(this.value);">
                                <option value="">Any</option>
                                <option value="Collision">Collision</option>
                                <option value="Fire">Fire</option>
                                <option value="Intentional">Intentional</option>
                                <option value="Storm">Storm</option>                                   
                            </select>
                            </div>

Answer 1

正如我在上面评论的，您可以通过考虑 <select> 两个元素的值来解决过滤问题。

您可以通过使用单个过滤功能来实现，如下所示：

filterMarkers = function () {
    var category_type = document.getElementById('category_type_filter').value;
    var category_loss = document.getElementById('category_loss_filter').value;
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        if ((
            marker.category_type == category_type ||
            category_type.length === 0
        ) && (
            marker.category_loss == category_loss ||
            category_loss.length === 0
        )) {
            marker.setVisible(true);
        } else {
            marker.setVisible(false);
        }
    }
};

如果您将此与您的函数进行比较，您会看到将标记设置为“可见”的条件，现在是两个过滤器的组合。

在您的 HTML 中，为每个 <select> 添加一个 id 属性，使用函数中的相同值：category_type_filter 和 category_loss_filter。

这应该可以解决问题。

需要明确的是，您的问题通常与 Google 地图无关，而是与 Javascript 相关。也许花一些时间阅读 DOM、事件和 Javascript 如何协同工作是个好主意。 :)

P.S.：为简洁起见，您甚至可以将整个 if/else 块替换为单个函数调用：

marker.setVisible((marker.category_type == category_type || category_type.length === 0) && (marker.category_loss == category_loss || category_loss.length === 0));