knockoutjs Google Maps API显示所有标记

Question

使用硬编码的标记位置阵列构建Google地图页面。有一个搜索框使用敲除来过滤屏幕上的可见标记。这个想法是，当你在搜索框中输入每个字母时，敲除过滤你在屏幕上看到的标记。这一切都正常，但如果我在搜索框中输入几个字母，然后清除它，所有标记都不会重新出现在屏幕上。我知道这应该是一个简单的条件，但对于我的生活，我无法得到它的工作。 下面是相关代码：

var locations = [ 
    { 
     title: "Location 1", 
     latlong: { lat: 25.55555, lng: -80.55555 }, 
     street: "123 Main St", 
     city: "Anytown, USA 12345", 
     id: 0, 
     showLoc: ko.observable(true), 
     visible: ko.observable(true), 
    }, 
    { 
     title: "Location 2", 
     latlong: { lat: 27.77777, lng: -81.11111 }, 
     street: "456 Main St", 
     city: "Anytown, USA 12345",   
     id: 1, 
     showLoc: ko.observable(true), 
     visible: ko.observable(true), 
    }] 

//loop to drop markers on map and add marker properties 
function createMarkers() { 
    for (i = 0; i < locations.length; i++) { 
     locations[i].marker = new google.maps.Marker({ 
      position: locations[i].latlong, 
      map: map, 
      title: locations[i].title, 
      animation: google.maps.Animation.DROP, 
      id: i 
     }); 
    } 
} 

//sets marker visibility 
function setMarkerVisibility() { 
    for (i = 0; i < locations.length; i++) { 
     locations[i].marker.setVisible(locations[i].visible); 
    } 
} 


//knockout viewmodel - handles search locations array and filtering 
function AppViewModel() { 
    query = ko.observable(''); 
    this.locations = ko.computed(function() { 
     var self = this; 
     var search = self.query().toLowerCase(); 
     return ko.utils.arrayFilter(locations, function (loc) { 
      //I've tried adding an || query('') here, or an else if, but no luck 
      if (loc.title.toLowerCase().indexOf(search) >= 0 || (query(''))) { 
       loc.showLoc(true); 
       loc.visible = true; 
      } else { 
       loc.showLoc(false); 
       loc.visible = false; 
       setMarkerVisibility(); 
      } 
     }); 
    }); 
} 

Answer 1

所以这里的答案是：ko.computed功能之前 createMarkers（）在脚本执行，所以我需要添加一个IF通过数组循环，并验证了该该标志已经创建

function AppViewModel() { 
    query = ko.observable(''); 
    this.locations = ko.computed(function() { 
     var self = this; 
     var search = self.query().toLowerCase(); 

     if (!search) { 
      for (i = 0; i < locations.length; i++) { 
       if (locations[i].marker) //checks to see that markers exist 
     locations[i].marker.setVisible(true); 
      } 
     } 

     return ko.utils.arrayFilter(locations, function (loc) {    
      if (loc.title.toLowerCase().indexOf(search) >= 0 || search == '') { 
       loc.showLoc(true); 
       loc.visible = true; 
      } else { 
       loc.showLoc(false); 
       loc.visible = false; 
      } 
      setMarkerVisibility(); 
     }); 
    }); 
} 

Answer 2

我不知道，但它看起来像有可能是一个问题，你如果在该（查询（“”））声明语句将永远是假的。你将变量“query”设置为一个空的可观察对象，然后使用将值放入可观察对象的语法，据我所知。我猜你想要显示所有标记，如果你的搜索输入是空的。我想你会想要使用你当前的变量来测量输入是否为空以显示全部。 if语句的第一部分也缺少setMarkerVisibility（）调用。

//knockout viewmodel - handles search locations array and filtering 
function AppViewModel() { 
    query = ko.observable(''); 
    this.locations = ko.computed(function() { 
     var self = this; 
     var search = self.query().toLowerCase(); 
     return ko.utils.arrayFilter(locations, function (loc) { 
      //Show all location markers if they contain the search text or if the search text is empty 
      if (loc.title.toLowerCase().indexOf(search) >= 0 || search == '') { 
       loc.showLoc(true); 
       loc.visible = true; 
      } else { 
       loc.showLoc(false); 
       loc.visible = false; 
      } 
      setMarkerVisibility(); 
     }); 
    }); 
}