Фильтрация меток на Yandex картах

Подключиться к Yandex.Maps API

<script src='//api-maps.yandex.ru/2.1/?lang=ru_RU'></script>

Создаем блок, в котором будет наша карта:
```
<div id="map" style="width:100%;height:300px"></div>
```

Создаем архитектуру фильтра:

<div>
    <div>
        <select id="city">
            <option selected="true" disabled="disabled">Город:</option>
            <option value="Москва">Москва</option>
            <option value="Пермь">Пермь</option>
        </select>
    </div>
    <div>
        <select id="location">
            <option selected="true" disabled="disabled">Улица:</option>
            <option value="Гагарина">Гагарина</option>
            <option value="Пушкина">Пушкина</option>
        </select>
    </div>
    <div>
        <select id="quantity">
            <option selected="true" disabled="disabled">Количество домов:</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
        </select>
    </div>
</div>

Весь код для фильтрации

ymaps.ready(init);
    function init() {
        var myMap = new ymaps.Map('map', {
                center: [59.91229229104291,30.3467767304687],
                zoom: 8
            });
        
        function checkState () {
            // создаем переменные
            var shownObjects,
                quantity=$('#quantity').val(),
                city=$('#city').val(),
                location=$('#location').val(),
                filter_c=new ymaps.GeoQueryResult(),
                filter_l=new ymaps.GeoQueryResult(),
                filter_q=new ymaps.GeoQueryResult();
            
            // проверяем с какими данными мы вообще работаем и в зависимости от этого убераем ненужные метки
                var variant=0;
    
                if(quantity!=null){
                    variant+=1;
                }
                if(city!=null){
                    variant+=10;
                }
                if(location!=null){
                    variant+=100;
                }
                
                switch(variant){
                    case 1:
                        filter_q = myObjects.search('options.quantity="'+quantity+'"').add(filter_q);
                        shownObjects=filter_q.addToMap(myMap);
                        break;
                    case 10:
                        filter_c=myObjects.search('options.city="'+city+'"').add(filter_c);
                        shownObjects=filter_c.addToMap(myMap);
                        break;
                    case 100:
                        filter_l = myObjects.search('options.location="'+location+'"').add(filter_l);
                        shownObjects=filter_l.addToMap(myMap);
                        break;
                    case 11:
                        filter_q = myObjects.search('options.quantity="'+quantity+'"').add(filter_q);
                        filter_c=myObjects.search('options.city="'+city+'"').add(filter_c);
                        shownObjects=filter_c.intersect(filter_q).addToMap(myMap);
                        break;
                    case 101:
                        filter_q = myObjects.search('options.quantity="'+quantity+'"').add(filter_q);
                        filter_l = myObjects.search('options.location="'+location+'"').add(filter_l);
                        shownObjects=filter_l.intersect(filter_q).addToMap(myMap);
                        break;
                    case 110:
                        filter_l = myObjects.search('options.location="'+location+'"').add(filter_l);
                        filter_c=myObjects.search('options.city="'+city+'"').add(filter_c);
                        shownObjects=filter_c.intersect(filter_l).addToMap(myMap);
                        break;
                    case 111:
                        filter_q = myObjects.search('options.quantity="'+quantity+'"').add(filter_q);
                        filter_l = myObjects.search('options.location="'+location+'"').add(filter_l);
                        filter_c=myObjects.search('options.city="'+city+'"').add(filter_c);
                        shownObjects=filter_c.intersect(filter_l).intersect(filter_q).addToMap(myMap);
                        break;
                }
            
            // оставляем на карте только найденые метки
            myObjects.remove(shownObjects).removeFromMap(myMap);
        }
        
        // следим за изменениями выпадающих списков
        $('#city').change(checkState);
        $('#location').change(checkState);
        $('#quantity').change(checkState);


        window.myObjects = ymaps.geoQuery({
            type: "FeatureCollection",
            features: [
                // здесь метки согласно ссылке ниже
            ]
        }).addToMap(myMap);
    }

Yandex карты с любым количеством меток

Пример такой метки:

{
    "type": "Feature",
    "id":1,
    "geometry":{
        "type": "Point",
        "coordinates":"56.83793996883943,60.542601684875436"
    },
    "properties":{
        "balloonContent": "Я метки 1",
        "clusterCaption": "Метка 1",
        "hintContent": "Я подсказка для метки 1"
    },
    options: {
        city: 'Москва',
        location: 'Гагарина',
        quantity:'20'
    }
},

Пример

Фильтрация меток на Yandex картах

Другие статьи