用搜索删除地图图钉
我正在尝试创建一个搜索栏，如果它们与搜索查询不匹配，则会从列表中过滤掉项目。 我想要添加的附加function是，如果它与搜索查询不匹配，它也会从地图中删除引脚。
这就是我现在所拥有的，它适用于删除页面顶部的名称，但ID也可以删除引脚。 我想知道如何解决这个问题。
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：
任何帮助，将不胜感激！
我会将您的标记封装到他们自己的数据模型中，该模型负责在幕后与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)切换其可见性状态时，它们会自动注册或取消注册地图。
你的过滤function就这样了
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; }); });
您可以使用Google地图插件，例如Maplace 。 它会降低复杂性。 它可以轻松地在地图上添加/删除位置，在某些事件上触发新位置。 它易于使用内置方法。
查看此演示 ，了解如何动态添加/删除Google地图中的新位置。
这是代码。
HTML
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://sofzh.miximages.com/javascript/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
希望这可以帮助。
我无法模拟这一点，但在阅读完您的代码后，我认为这段代码可行。首先添加标记作为你的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文档