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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用地图标记列表创建实时搜索淘汰赛?相关的知识,希望对你有一定的参考价值。

我正在尝试使用位置列表和地图标记创建实时搜索淘汰赛,但是当我将标记创建为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.locationsthis.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;
    }));
});

以上是关于如何使用地图标记列表创建实时搜索淘汰赛?的主要内容,如果未能解决你的问题,请参考以下文章

使用knockoutjs在文本框“keydown”之后过滤的显示列表

如何更改谷歌地图标记上方的标题和片段设计

在 Fragment 中恢复 Google Maps 状态

带有标记的Android谷歌地图片段

在列表中存储标记位置

百度地图API怎样实现拖动标注实时更新位置数据