过滤谷歌标记与淘汰赛

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

感谢

来源

2017-12-18 Alberto Rocha

被抛出此错误的原因是没有''中placeItem' – adiga

marker'财产我怎样才能给那些属性“placeItem” –

。在你的提琴JavaScript错误：' Uncaught TypeError：无法读取未定义的属性'地图' – geocodezip

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

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

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

来源

2017-12-20 23:36:42

过滤谷歌标记与淘汰赛

回答

相关问题