[英]filterable jquery-ui-map google map
我需要過濾我的谷歌地圖標記。 現在,我借助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代碼的最后一部分是我在文檔中找到的,不是很好,或者我可能很愚蠢地弄清楚了。
我的目標是過濾“標簽”之后的內容-所以我需要一個簡單的列表,在這里我可以在一個鏈接上僅顯示帶有此特殊標簽的標簽。
也許您對完成這項工作有一些好的建議?
您將標記作為字符串傳遞,但是必須使其以數組形式傳遞才能使其起作用。
假設一個實例上需要多個標簽,您將執行以下操作:
<li data-gmapping='{"id":"2","latlng":{"lat":52.4885039,"lng":13.3530732},"tags":"Salatfritz,Bierbier"}'><!--MORE STUFF--></li>
接着:
var tagArray = data.tags.split(",");
$('#map_canvas').gmap('addMarker', {'id': data.id, 'tags':tagArray, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) {
/*DO STUFF*/
});
現在您可以通過以下兩種方式找到標記
$('#map_canvas').gmap('find', 'markers', { 'tags': 'Salatfritz' }, function(marker, found) {
marker.setVisible(found);
});
要么
$('#map_canvas').gmap('find', 'markers', { 'tags': 'Bierbier' }, function(marker, found) {
marker.setVisible(found);
});
希望能有所幫助。
$('#map_canvas').gmap('find', 'markers', { 'property': 'tags', 'value': 'Salatfritz' }, function(marker, found) {
marker.setVisible(found);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.