Question

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

这就是我现在所拥有的，它适用于删除页面顶部的名称，但也可以像删除引脚一样。我想知道如何解决这个问题。

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>

任何帮助将不胜感激！

Answer 1

我会将您的标记封装到自己的数据模型中，以便在幕后处理与Google地图的互动：

// 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)切换其可见性状态时，它们会自动注册或取消注册地图。

您的过滤功能因此变为

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

Answer 2

我无法模拟这一点，但在阅读完您的代码后，我认为此代码可以正常工作。首先添加标记作为您的引脚属性：

self.mapPin = function (name, lat, lon, text) {
    this.name = ko.observable(name);
    this.lat = ko.observable(lat);
    this.lon = ko.observable(lon);
    this.text = ko.observable(text);
    this.marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        map: map,
        animation: google.maps.Animation.DROP
    });

    // removed for clarity
};

然后在过滤引脚时设置引脚标记可见性

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

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

        pin.marker.setVisible(match); // maps API hide call
        return match;
    });
});

Google Maps Marker Documentation

Answer 3

您可以使用Google地图插件，例如Maplace。它会降低复杂性。它可以轻松地在地图上添加/删除位置，在某些事件上触发新位置。它易于使用内置方法。

请检查此Demo，了解如何动态添加/删除Google地图中的新位置。

这是代码。

HTML

<div id="gmap"></div>

<div id="menu">
  <a href="javascript:void(0);" class="loc_link" data-lat="12.58" data-long="77.38" data-title="Bangalore" data-html="Bangalore, Karnataka, India">A</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="31.2" data-long="121.5" data-title="Shanghai" data-html="Shanghai, China">B</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="35.6895" data-long="139.6917" data-title="Tokyo" data-html="Tokyo, Japan">C</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="28.6139" data-long="77.2089" data-title="New Delhi" data-html="New Delhi, India">D</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="40.7127" data-long="74.0059" data-title="New York" data-html="New York City">E</a>

 <br/>
  <span id="tool_tip">Click links to see effect!</span>
</div>

CSS

#gmap{
width: 70%;
height: 350px;
margin: 0 auto;
}

#menu {
 width: 300px;
 margin: 15px auto;
 text-align:center;
}
#menu a.loc_link {
 background: #0f89cf;
 color: #fff;
 margin-right: 10px;
 display: inline-block;
 margin-bottom:10px;
 padding: 5px;
 border-radius: 3px;
 text-decoration: none;
}
#menu span#tool_tip {
  display: inline-block;
  margin-top: 10px;
}

JQuery的

$(function(){
var map;
var LocA = [{
    lat: 12.58,
    lon: 77.38,
    title: 'Bangalore',
    html: 'Bangalore, Karnataka, India',
    zoom: 4,
    icon: 'http://maps.google.com/mapfiles/markerA.png',
    animation: google.maps.Animation.DROP
 }];

map = new Maplace({
  locations: LocA,
  map_div: '#gmap',
  generate_controls: false,
  start: 0   
}).Load();


$(".loc_link").click(function(){
  var newLoc = [{
      lat: $(this).data('lat'),
      lon: $(this).data('long'),
      title: $(this).data('title'),
      html: $(this).data('html'),
      zoom: 4,
      icon: 'http://maps.google.com/mapfiles/marker'+$(this).text()+'.png',
    animation:google.maps.Animation.DROP
  }];
 map.AddLocations(newLoc).Load();
 map.ViewOnMap($(this).index()+1);
});
});

您需要添加这两个js库才能使其正常工作

http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.13 http://maplacejs.com/src/maplace-0.1.3.min.js

希望这有帮助。

用搜索删除地图图钉

3 个答案:

HTML

CSS

JQuery的