фильтруемая JQuery-UI-карта Google Map - PullRequest
Новая
       30

фильтруемая JQuery-UI-карта Google Map

0 голосов
/ 27 марта 2012

Мне нужно отфильтровать маркеры карт Google.прямо сейчас я создаю карту с помощью плагина 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 - это то, что я нашел в документации, а это не такхорошо, или, может быть, я глуп, чтобы понять это.

Моя цель - фильтровать после «тегов» - поэтому мне нужен простой список, где я мог бы на одной ссылке и только маркеры с этим специальнымтег показывается.

может быть, у вас есть хороший совет, как это сделать?

Ответы [ 2 ]

1 голос
/ 13 августа 2012

Вы передаете тег (ы) в виде строки, но вы должны передать их в массиве, чтобы он работал.

Предполагая, что вам понадобится несколько тегов для экземпляра, вы должны сделать что-то вроде: 

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

надеюсь, что это поможет.

0 голосов
/ 28 марта 2012 
$('#map_canvas').gmap('find', 'markers', { 'property': 'tags', 'value': 'Salatfritz' }, function(marker, found) {
            marker.setVisible(found);
        });

jQuery UI Map Пример кода

...