필터링 할 때 마커를 적절히 표시하거나 숨기는 필터 기능

Question

필터에 따라 Google지도 마커를 표시/숨기기하는 검색 필터 기능을 만들어야합니다. 예를 들어, 검색 양식에 "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); 
     } 

Answer 1

에 대한 덕분에 당신은 당신이 필요로 아주 가까이있어. 위치는 ko.observable이므로 기억하려면 괄호를 사용해야합니다. 이것을 시도하십시오 :

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