过滤谷歌标记与淘汰赛

我一直在试图解决这个问题,没有运气。我已经检查过其他帖子,没有运气。我想我的代码有错误,我的目标是能够过滤列表并仅显示/隐藏该列表中的标记。代码的样本是在这里: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);

感谢

回答:

为了过滤你需要做的标记一些东西。

你的第一个问题是这样的一行:

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

});

}

});

​​

以上是 过滤谷歌标记与淘汰赛 的全部内容, 来源链接: utcz.com/qa/261982.html

回到顶部