Question

我需要创建一个搜索过滤器功能，根据过滤器显示/隐藏谷歌地图标记。例如，如果我键入＆＃34; a＆＃34;在我的搜索表单中，地图将仅显示包含＆＃34; a＆＃34;的标记，而另一个保留隐藏。我正在使用JS和淘汰框架。我正在考虑使用Marker.setVisible（true / false），但我不知道如何实现此功能。谢谢你的帮助

var Data = {
            locations: [

            new Location("Palazzo Pitti", 43.765264, 11.250094,"4bc8c9d7af07a593d4aa812d"),
            new Location("Uffizi Gallery", 43.768439, 11.2559,"51191cdfb0ed67c8fff5610b"),
            new Location("Florence Cathedral", 43.773083, 11.256222,"4bd00cdb046076b00a576f71"),
            new Location("Palazzo Vecchio", 43.769315, 11.256174,"4bd01b8077b29c74a0298a82"),
            new Location("Piazza della Signoria", 43.7684152597, 11.2534589862,"4b81729af964a520a7a630e3"),
            new Location("Giotto's Campanile", 43.772772, 11.255786,"4b49cd73f964a520d87326e3"),
            new Location("Piazzale Michelangelo", 43.762462, 11.264897,"4b3276d5f964a520620c25e3"),
            new Location("Ponte Vecchio", 43.768009, 11.253165,"4b6ed35df964a52038cc2ce3"),
            new Location("Boboli Gardens", 43.762361, 11.248297,"4bc97abcfb84c9b6f62e1b3e"),
            new Location("Vinci", 43.783333, 10.916667,"4ca4f0a0965c9c74530dc7fa"),
            ],
            query: ko.observable(''),
        };

        // Search by name into the locations list.
        Data.search = ko.computed(function() {
         var self = this;
         var search = this.query().toLowerCase();
         return ko.utils.arrayFilter(self.locations, function(location) {
         return location.title.toLowerCase().indexOf(search) >= 0;
        });}, Data);

        ko.applyBindings(Data);
        }

Answer 1

你非常接近你需要的东西。请记住位置是ko.observable，因此您需要使用parens打开它。试试这个：

Data.search = ko.computed(function() {
    var self = this;
    var search = this.query().toLowerCase();
    return ko.utils.arrayFilter(self.locations, function(location) {
        if (location.title.toLowerCase().indexOf(search) >= 0) {
            location.setVisible(true);
            return true;
        }
        else {
            place.setVisible(false);
            return false;
        }            
    });
}, Data);  // not sure you really need this last reference to Data here

筛选功能，在过滤时相应地显示/隐藏标记

1 个答案: