用搜索删除地图图钉 [英] Removing Map Pin with Search

问题描述

我正在尝试创建一个搜索栏，如果它们与搜索查询不匹配，则会从列表中过滤掉项目。我想要添加的附加功能是，如果它与搜索查询不匹配，它也会从地图中删除引脚。

I'm trying to create a search bar that filters out items from a list if they do not match the search query. The additional functionality that I'm trying to add is that if it doesn't match the search query it removes the pins from the map as well.

这就是我的意思现在有它，它可以删除页面顶部的名称，但ID也可以删除引脚。我想知道怎么做。

This is what I have right now and it works for removing the names along the top of the page, but id like it to remove the pins also. I'm wondering how to go about this.

self.pins = ko.observableArray([
  new self.mapPin("Waterloo Station", 51.503035, -0.112326, "test3""),
  new self.mapPin("King's Cross Station", 51.530984, -0.122583, "test2"),
  new self.mapPin("Putney Bridge", 51.468050, -0.209081, "test1")
]);

self.query = ko.observable('');

self.filterPins = ko.computed(function () {
    var search = self.query().toLowerCase();
    return ko.utils.arrayFilter(self.pins(), function (pin) {
        return pin.name().toLowerCase().indexOf(search) >= 0;
    });
});

HTML：

<input data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off" type="text" class="form-control" placeholder="Filter Locations">

        <ul data-bind="foreach: filterPins" class="nav navbar-nav" class=" nav navbar-nav">
            <li class="active">
                <a data-bind="text: name"></a>

任何帮助都将不胜感激！

Any help would be appreciated!

推荐答案

我会将您的标记封装到他们自己的数据模型中，该模型负责在幕后与Google地图的交互：

I would encapsulate your markers into their own data model that takes care of the interaction with Google Maps behind the scenes:

// we have to give it access to the map object, so that
// it can register and de-register itself
var Pin = function Pin(map, name, lat, lon, text) {
  var marker;

  this.name = ko.observable(name);
  this.lat  = ko.observable(lat);
  this.lon  = ko.observable(lon);
  this.text = ko.observable(text);

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    animation: google.maps.Animation.DROP
  });

  this.isVisible = ko.observable(false);

  this.isVisible.subscribe(function(currentState) {
    if (currentState) {
      marker.setMap(map);
    } else {
      marker.setMap(null);
    }
  });

  this.isVisible(true);
}

现在你可以用 pin = new创建你的引脚固定（地图，1,2，'文字'），当您用 pin.isVisible（false）切换其可见性状态时，它们会自动注册或取消注册地图。

Now you can create your pins with pin = new Pin(map, 1, 2, 'text'), and when you toggle their visibility state with pin.isVisible(false), they automatically register or deregister with the map.

您的过滤功能因此变为

self.filterPins = ko.computed(function () {
    var search  = self.query().toLowerCase();

    return ko.utils.arrayFilter(self.pins(), function (pin) {
        var doesMatch = pin.name().toLowerCase().indexOf(search) >= 0;

        pin.isVisible(doesMatch);

        return doesMatch;
    });
});

这篇关于用搜索删除地图图钉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！