篩選功能，相應地顯示/隱藏標記過濾

我需要創建一個搜索過濾器功能，相應地顯示/隱藏谷歌地圖標記過濾器。例如，如果我在搜索表單中鍵入「a」，地圖將只顯示包含「a」的標記，而其他標記保持隱藏狀態。我使用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); 
     }

來源

2017-03-01 Daniele Gulli

你對我們有什麼期望？ –

我正在嘗試類似的東西，但它返回一個錯誤：var isMatching = location.title.toLowerCase（）。indexOf（search）> = 0; if（isMatching）{ marker.setVisible（true）; } else { marker.setVisible（false）; } return isMatch; }）; –

任何數組對象都有一個.filter函數。 –

你非常接近你的需要。請記住，位置是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

來源

2017-03-02 08:10:55 coralvanda

篩選功能，相應地顯示/隱藏標記過濾

回答

相關問題