使用搜索删除地图图钉 [英] 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.

这就是我现在所拥有的，它适用于删除页面顶部的名称，但我也喜欢它删除别针.我想知道如何解决这个问题.

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>

任何帮助将不胜感激！

推荐答案

我会将您的标记封装到它们自己的数据模型中，该模型负责在后台与 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 Pin(map, 1, 2, 'text') 创建您的图钉，并且当您使用 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屋！