google map Фильтр маркеров

13zone

Профессор
Регистрация
22 Ноя 2008
Сообщения
203
Реакции
45
Есть генерация и вывод маркеров из базы данных, пробую сделать фильтр маркеров по категории, что-то не выходит, - может кто подскажет где ошибся? или сделать по нормальному.

Код:
<div id="buttons">
 
  <input type="checkbox" name="filter" id="batarei" class='chk-btn'>
  <label for='batarei'>Батарейки</label>
 
  <input type="checkbox" name="filter" id="makulatura" class='chk-btn'>
  <label for='makulatura'>Макулатура</label>
 
  <input type="checkbox" name="filter" id="metallolom" class='chk-btn'>
  <label for='metallolom'>Металлолом</label>
  <br>
</div>

<script>

var filters = {batarei:false, metallolom:false, makulatura:false}

$(function () {
    $('input[name=filter]').change(function (e) {
     map_filter(this.id);
      filter_markers()
  });


})

var get_set_options = function() {
  ret_array = []
  for (option in filters) {
    if (filters[option]) {
      ret_array.push(option)
    }
  }
  return ret_array;
}

var filter_markers = function() { 
  set_filters = get_set_options()
 
  for (i = 0; i < markers.length; i++) {
    markers = markers[i];

    keep=true
    for (opt=0; opt<set_filters.length; opt++) {
      if (!markers.category[set_filters[opt]]) {
        keep = false;
      }
    }
    marker.setVisible(keep)
  }
}

var map_filter = function(id_val) {
   if (filters[id_val])
      filters[id_val] = false
   else
      filters[id_val] = true
}

        var icons = { // свои иконки для каждого типа обьекта
            batarei: {
                icon: 'batarei.png'
            },
            makulatura: {
                icon: 'makulatura.png'
            },
            odejda: {
                icon: 'odejda.png'
            },
            metallolom: {
                icon: 'metallolom.png'
            },
            rtut: {
                icon: 'mercury.png'
            },
            plastkr: {
                icon: 'plastkr.png'
            },
            plastbut: {
                icon: 'plastbut.png'
            },
            steklo: {
                icon: 'steklo.png'
            },
            shina: {
                icon: 'shina.png'
            },
            other: {
                icon: 'other.png'
            },
            oil: {
                icon: 'oil.png'
            },
            kirpich: {
                icon: 'kirpich.png'
            },
            electronic: {
                icon: 'electronic.png'
            }
        };
    var map, trafficLayer;         
        var vis = false;



        function refreshMap()
        {               
            if (vis)           
            {
                trafficLayer.setMap(null)
                vis = false;
            }
            else
            {
                trafficLayer.setMap(map);
                vis = true;
            }           
        }


        var markers = [];
        var sity = [];
        var marker1;
        var infowincontent = [];
        var mSelsity = document.querySelector( '#gorod' );
        var mSelect = document.querySelector( '#markers' ); // выбор обьекта в поле
        var textElement = document.querySelector( '#selected' );

        var nono = <?php echo json_encode($abons); ?>; // массив со всеми данными из базы - nono[i][9] текст для балуна маркера
        var locations = <?=$point; ?>; // координаты всех маркеров

       
        function updateCoordinates( lat, lng ) {
            document.getElementById( 'lat' ).value = lat;
            document.getElementById( 'lng' ).value = lng;
        }
       
        function initMap() {
            map = new google.maps.Map( document.getElementById( "map" ), {
                center: new google.maps.LatLng( 49.988546, 36.233000 ), // центр в Харькове
                zoom: 6,
                zoomControl: true,
                scrollwheel: false
            } );

            trafficLayer = new google.maps.TrafficLayer();
            var infoWin = new google.maps.InfoWindow();
            var markers = locations.map( function ( location, i ) {
                var marker = new google.maps.Marker( {
                    position: location,
                    icon: {
                        url: nono[ i ][ 3 ] + '.png',
                        scaledSize: new google.maps.Size( 35, 35 )
                    }, // добавляем иконки маркера и сообщаем размеры
                    title: nono[ i ][ 4 ],
                    sity: nono[ i ][ 1 ],
                    category: nono[ i ][ 3 ]
                } );
                var text = nono[ i ][ 9 ];
                var infowincontent = '<div id=""><input id="tab1" type="radio" name="tabs" checked hidden="true"><label for="tab1">Адрес</label><input id="tab2" type="radio" name="tabs" hidden="true"><label for="tab2">Описание</label><input id="tab3" type="radio" name="tabs" hidden="true"><label for="tab3">Фото</label><section id="content1"><b>Город: ' + nono[ i ][ 1 ] + '</b><br><b>Что принимают: </b><k style="color: red;">' + nono[ i ][ 4 ] + '</k><br><b>Адрес: </b>' + nono[ i ][ 5 ] + '</section><section id="content2"><b>Описание обьекта: </b>' + nono[ i ][ 9 ] + '</section><section id="content3"><img class=infoimage src=' + nono[ i ][ 8 ] + ' /></section></div>';

                google.maps.event.addListener( marker, 'click', function ( evt ) {
                    infoWin.close();
                        infoWin.setContent( infowincontent );
                        map.panTo( marker.getPosition(), 100 );
                        infoWin.open( map, marker );
                        textElement.innerHTML = infowincontent || posii;
                    } )
                   
                return marker;

                setInterval( function () {
                    markers[ 0 ].setPosition( new google.maps.LatLng( markers[ 0 ].getPosition().lat() + Math.random() * 0.0002 - 0.0001, markers[ 0 ].getPosition().lng() + 0.0001 ) );
                }, 100 );

                setInterval( function () {
                    if ( map.getBounds().contains( markers[ 0 ].getPosition() ) ) {
                        map.panTo( markers[ 0 ].getPosition() );
                    }
                }, 5000 );
            } );

            var infoWindow = new google.maps.InfoWindow( {
                map: map
            } );

           
            var markerCluster = new MarkerClusterer( map, markers, {
                imagePath: window.location.protocol + "//" + window.location.host + "/" + 'images/m',
                gridSize: 90
            } );
           
    </script>
 
вобщем сделал так, работает, но по 1 фильтру (2 и более никак...) может кто знает как сделать мультивыбор? и как-то странно ведет себя после фильтрации, инфоокно начинает центрировать вообще в другом месте от маркера... как исправить сей баг?

Код:
var markers = locations.map( function ( location, i ) {
            var category = nono[ i ][ 3 ];
                var marker = new google.maps.Marker( {
                    position: location,
                    icon: {
                        url: nono[ i ][ 3 ] + '.png',
                        scaledSize: new google.maps.Size( 35, 35 )
                    }, // добавляем иконки маркера и сообщаем размеры
                    title: nono[ i ][ 4 ],
                    sity: nono[ i ][ 1 ],
                    category: category // категория для фильтра
                } );

                var text = nono[ i ][ 9 ];
                var infowincontent = '<div id=""><input id="tab1" type="radio" name="tabs" checked hidden="true"><label for="tab1">Адрес</label><input id="tab2" type="radio" name="tabs" hidden="true"><label for="tab2">Описание</label><input id="tab3" type="radio" name="tabs" hidden="true"><label for="tab3">Фото</label><section id="content1"><b>Город: ' + nono[ i ][ 1 ] + '</b><br><b>Что принимают: </b><k style="color: red;">' + nono[ i ][ 4 ] + '</k><br><b>Адрес: </b>' + nono[ i ][ 5 ] + '</section><section id="content2"><b>Описание обьекта: </b>' + nono[ i ][ 9 ] + '</section><section id="content3"><img class=infoimage src=' + nono[ i ][ 8 ] + ' /></section></div>';

                google.maps.event.addListener( marker, 'click', function ( evt ) {
                    infoWin.close();
                        infoWin.setContent( infowincontent );
                        map.panTo( marker.getPosition(), 100 );
                        infoWin.open( map, marker );
                        textElement.innerHTML = infowincontent || posii;
                    } )

//console.log(marker.category);
var filters = {batarei:false, metallolom:false, makulatura:false}

jQuery(function () {
    jQuery('input[name=filter]').change(function (e) {
     map_filter(this.id);
      filter_markers()
  });
})

var get_set_options = function() {
  ret_array = []
  for (option in filters) {
    if (filters[option]) {
      ret_array.push(option)
    }
  }
  return ret_array;
}

var filter_markers = function() { 
set_filters = get_set_options();
  for (i = 0; i < markers.length; i++) {
                marker = markers[i];
for (opt=0; opt < set_filters.length; opt++) {
                if (marker.category == set_filters[opt]) {
                    marker.setVisible(true);
                }
                else {
                    marker.setVisible(false);
                }
            }
}
}
var map_filter = function(id_val) {
   if (filters[id_val])
      filters[id_val] = false
   else
      filters[id_val] = true
}
                return marker;

сам тестовый проект находится тут :
Скрытое содержимое доступно для зарегистрированных пользователей!
 
Назад
Сверху