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