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

Тема в разделе "JavaScript", создана пользователем 13zone, 3 май 2018.

  1. 13zone

    13zone

    Регистр.:
    22 ноя 2008
    Сообщения:
    205
    Симпатии:
    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>
     
  2. 13zone

    13zone

    Регистр.:
    22 ноя 2008
    Сообщения:
    205
    Симпатии:
    45
    вобщем сделал так, работает, но по 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;
    сам тестовый проект находится тут :