我需要过滤我的谷歌地图标记。现在,我在 jquery-ui-map 插件的帮助下生成了一张地图。这是我的标记:
<div id="map_canvas" class="map" style="width:100%; height:600px"></div>
<ul id="verkaufsstellen">
<li data-gmapping='{"id":"2","latlng":{"lat":52.4885039,"lng":13.3530732},"tags":"Salatfritz"}'>
<div class="info-box"><div class="box-inner"><p><strong>ÄHRENSACHE</strong><br />Apostel-Paulus Str. 40 - 10823 Berlin</p><i>vertreibt: Salatfritz</i></div></div>
</li>
<li data-gmapping='{"id":"5","latlng":{"lat":52.524268,"lng":13.40629},"tags":"Bierbier"}'>
<div class="info-box"><div class="box-inner"><p><strong>Bier, Bier Test</strong><br />Ein wunderbarer Testeintrag</p><i>vertreibt: Bierbier</i></div></div>
</li>
</ul>
这就是我的js:
if ($("#map_canvas").length){
$('#map_canvas').gmap({'zoom':24,'scrollwheel':false,styles:[{stylers:[{lightness:7},{saturation:-100}]}],option:[{scrollwheel:false}]}).bind('init', function(ev, map) {
$("[data-gmapping]").each(function(i,el) {
var data = $(el).data('gmapping');
$('#map_canvas').gmap('addMarker', {'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) {
$(el).click(function() {
$(marker).triggerEvent('click');
});
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': $(el).find('.info-box').html() }, this);
});
});
});
$('#map_canvas').gmap('find', 'markers', { 'tags': 'Salatfritz' }, function(marker, found) {
marker.setVisible(found);
});
}
所以 js 代码的最后一部分是我在文档中找到的,这不是很好,或者我可能愚蠢地想出来。
我的目标是在“标签”之后过滤 - 所以我需要一个简单的列表,我可以在一个链接上只显示带有这个特殊标签的标记。
也许你有一些很好的建议来完成它?