用淘汰赛过滤谷歌标记

Posted 2021-05-05

我一直试图解决这个问题没有运气。我已经检查了其他帖子，没有运气。我想我的代码有错误，我的目标是能够过滤列表并只显示/隐藏该列表上的标记。代码示例如下：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项目没有基于构造函数的标记对象。所以，你必须添加它。我更改了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);
            });
        }
    });

Working fiddle here.