使用搜索删除地图图钉

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

我无法模拟这个，但在阅读你的代码后我认为这个代码可以工作。首先添加标记作为你的 pin 属性:

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。它将降低复杂性。它可以轻松地 add/remove 地图上的位置，在某些事件中触发新位置。它具有易于使用的内置方法。

查看此 Demo，了解如何 add/remove 在 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

希望对您有所帮助。

使用搜索删除地图图钉

Removing Map Pin with Search

javascript

jquery

knockout.js

HTML

CSS

JQuery