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(); 
     }); 
    }); 
}