如何使用地图标记列表创建实时搜索淘汰赛？

Posted 2021-05-05

我正在尝试使用位置列表和地图标记创建实时搜索淘汰赛，但是当我将标记创建为ViewModel的一部分时，代码不适用于标记，它仅适用于位置标题。

我的问题是：

如何在不使用视图模型中的谷歌地图API的情况下将每个位置与其标记相匹配，我之前已经创建过标记数组，但正如我所说，viewmodel无法处理它。有什么建议？

这是我的标记代码：

for (var i=0; i<locations.length; i++)
{
  var position = locations[i].location;
  var title = locations[i].title;
  var marker = new google.maps.Marker({
  map: map,
  icon: 'http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png',
  position: position,
  title: title,
  animation: google.maps.Animation.DROP,
  id: i
});

视图模型：

    // using knockout to make a live search
 function ViewModel(){
  var self =this;
  this.filter = ko.observable();

  this.locations = ko.observableArray(locations);
  this.markers = ko.observableArray(markers);
  this.visibleLocations = ko.computed(function(){
       return this.locations().filter(function(location){
           if(!self.filter() || location.title.toLowerCase().indexOf(self.filter().toLowerCase()) !== -1)
             return location;
             location.marker.setMap(matches ? self.map : null);
             //this.location.marker.setVisible(true);
        //marker.setVisible(true);
       });
   },this);

}

ko.applyBindings(new ViewModel());

风景 ：

  <label for="filter">Filter:</label>
<input id="filter" type="text" data-bind="textInput: filter"/>
        <ul data-bind="foreach: visibleLocations">
           <li class="markers_info"> <a href="#" data-bind="text: title"> </a></li>
        </ul>

答案

好的，所以你有this.filter作为一个可观察的。好。这不需要this.locations或this.markers。只需添加一个marker成员到locations设置与该位置的标记。然后订阅对this.filter的更改：

self.visibleLocations = ko.observableArray();
self.filter.subscribe(function (filterValue) {
    locations.forEach(function (location) {
        var matches =
            !filterValue ||
            location.title.toLowerCase().indexOf(filterValue.toLowerCase()) !== -1;
        location.marker.setMap(matches ? self.map : null);
    });
    self.visibleLocations(locations.filter(function (location) {
        return location.marker.getMap() != null;
    }));
});