2017-12-18 234 views
-1

我一直在試圖解決這個問題,沒有運氣。我已經檢查過其他帖子,沒有運氣。我想我的代碼有錯誤,我的目標是能夠過濾列表並僅顯示/隱藏該列表中的標記。代碼的樣本是在這裏:https://jsfiddle.net/rp2t3gyn/2/過濾谷歌標記與淘汰賽

下面是代碼的樣本是因某些原因無法工作:

self.filteredPlaces = ko.computed(function() { 
    var filter = self.filter().toLowerCase(); 
    if (!filter) { 
     ko.utils.arrayForEach(self.placeList(), function (placeItem) { 
     placeItem.marker.setVisible(true); 
     }); 
     return self.placeList(); 
    } else { 
     return ko.utils.arrayFilter(self.placeList(), function(placeItem) { 
     // set all markers visible (false) 
     var result = (placeItem.city.toLowerCase().search(filter) >= 0); 
     placeItem.marker.setVisible(result); 
     return result; 
     }); 
    } 
    }, this); 

感謝

+0

被拋出此錯誤的原因是沒有''中placeItem' – adiga

+0

marker'財產我怎樣才能給那些屬性「placeItem」 –

+0

。在你的提琴JavaScript錯誤:' Uncaught TypeError:無法讀取未定義的屬性'地圖' – geocodezip

回答

0

爲了過濾你需要做的標記一些東西。

你的第一個問題是這樣的一行:

placeItem.marker.setVisible(true); 

廣場項目沒有根據你的構造標記對象。所以,你必須添加它。我改變了Place構造函數來添加一個標記對象(見下文)。

var Place = function(data, map, viewmodel) { 
this.city = data.city; 
this.lat = data.lat; 
this.lng = data.lng; 
var marker = new google.maps.Marker({ 
    map: map, 
    position: {lat: data.lat, lng: data.lng}, 
    city: data.city, 
    icon: { 
     path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, 
     scale: 5 
     }, 
    animation: google.maps.Animation.DROP, 
}); 
marker.addListener('click', function() { 
    viewmodel.clickSelection(marker, viewmodel.largeInfoWindow); 
}); 
this.marker = marker; 

};

並用它來初始化你的對象。最後,我更改了filteredPlaces函數,它需要訂閱查詢observable,這樣當你鍵入文本時,地圖上的標記會相應地進行調整。

self.query.subscribe(function() { 
    var filter = self.query().toLowerCase(); 
     if (!filter) { 
      ko.utils.arrayForEach(self.placeList(), function (placeItem) { 
       placeItem.marker.setMap(map); 
      }); 
      return self.placeList(); 
     } else { 
      ko.utils.arrayForEach(self.placeList(), function(placeItem) { 
       var result = (placeItem.city.toLowerCase().search(filter) >= 0); 

       if(result) 
        placeItem.marker.setMap(map); 
       else 
        placeItem.marker.setMap(null); 
      }); 
     } 
    }); 

​​