Клуб API Карт

Фильтрация объектов на карте

Алексей Дмитриевич
19 июня 2014, 16:30

1) Точки, выгружаемые из базы, сохранённые кошерно и они выводятся с помощью xml файла через geoXml. В мета данных у этих объектов есть параметр type, котоырй означает что эта точка относится к какому-то определённому типу. type = id категории например.

2) Есть менюха с типами (категориями) этих самых точке в виде чекбоксов.

Задача: отфильтровать это самое дело по этим типам. По умолчанию выделены все типы. При снятии галки пытаюсь отсеить ненужное, но получается какая-то ерунда, либо ничего не работает, либо всё удаляется.

Пытался раскуривать вот это, но что-то по ходу мозгов у мну не хватает категорически. Очень прошу помощи.

 

Вот что я навоял  в коде самой страницы есть js вот такого вида 

 

 

 ymaps.ready(function() {           
homeMap = new ymaps.Map('homeBigMap',{center: [53.419121,59.067168 ] ,zoom: 8,type: "yandex#map"});
            homeMap.controls
                .add("zoomControl")
                .add(new ymaps.control.TypeSelector(["yandex#map","yandex#hybrid", "yandex#publicMap"]));
            var balloonTpl ='<div class="mapItemRow">';
            balloonTpl+='<h3  class="mapItemRowTitle"><a href="$[properties.metaDataProperty.AnyMetaData.link]">$[properties.name]</a></h3>';
            balloonTpl+='<div class="mapItemRowLinkOuter"><a class="mapItemRowLink" href="$[properties.metaDataProperty.AnyMetaData.link]">Подробнее →</a></div>';
            balloonTpl+='</div>';
            window.myObjects = ymaps.geoQuery(ymaps.geoXml.load("http://xn---74-6cda1a0bzbkdetf.xn--p1ai/pointslist.xml").then(function(res){
                homeMap.geoObjects.add(res.geoObjects);
                res.geoObjects.options.set({ balloonContentBodyLayout: ymaps.templateLayoutFactory.createClass(balloonTpl)});
            }));
            myObjects.addToMap(homeMap);
            $(document).on('change','input[name="discountType"]', function() {
                var shownObjects,
                    checked = new ymaps.GeoQueryResult(),
                    uncheked = new ymaps.GeoQueryResult();
                $('input[name="discountType"]').each(function(i,item){
                    if($(this).prop('checked')){
                        checked.add(myObjects.search('properties.metaDataProperty.AnyMetaData.type == "'+$(this).val()+'"'));
                    }else{
                        uncheked.add(myObjects.search('properties.metaDataProperty.AnyMetaData.type == "'+$(this).val()+'"'));
                    }
                    shownObjects = checked.add(uncheked).addToMap(homeMap);;
                    myObjects.remove(shownObjects).removeFromMap(homeMap);
                });
            });
        });

 

 Решение

 


    ymaps.ready(function() {
        homeMap = new ymaps.Map('homeBigMap',{center: [53.419121,59.067168 ] ,zoom: 11,type: "yandex#map"});
        homeMap.controls
            .add("zoomControl")
            .add(new ymaps.control.TypeSelector(["yandex#map","yandex#hybrid", "yandex#publicMap"]));
        var balloonTpl ='<div class="mapItemRow">';
        balloonTpl+='<h3  class="mapItemRowTitle"><a href="$[properties.metaDataProperty.AnyMetaData.link]">$[properties.name]</a></h3>';
        balloonTpl+='<div class="mapItemRowLinkOuter"><a class="mapItemRowLink" href="$[properties.metaDataProperty.AnyMetaData.link]">Подробнее →</a></div>';
        balloonTpl+='</div>';
        window.myObjects = ymaps.geoQuery(ymaps.geoXml.load("{{ URL::route('XMLpointslist', array(strtotime(Sale::orderBy('updated_at', 'DESC')->first()->updated_at))) }}").then(function(res){
            res.geoObjects.options.set({ balloonContentBodyLayout: ymaps.templateLayoutFactory.createClass(balloonTpl)});
        }));
        myObjects.addToMap(homeMap);
    });
    $(document).on('change','input[name="discountType"]',function(){
        var search = myObjects.search('properties.metaDataProperty.AnyMetaData.type == "'+$(this).val()+'"'); //  ищим точки, которые соответствуют типу
        if(search.getLength()){   // проверяем найдено чего или нет
            if($(this).prop('checked')){
                myObjects.add(search).addToMap(homeMap); // если галка была установлена, то добавляем их на карту
            }else{
                myObjects.remove(search).removeFromMap(homeMap); // если снята, то убираем с карты
            }
        }
    });
6 комментариев
Подписаться на комментарии к посту
Алексей Дмитриевич
19 июня 2014, 16:45

не совсем то, в моём случае же происходит поиск по метаданным и я получаю geoObject ведь? как мне сложить найденные геообъекты и показать/скрыть то что надо?

Объекты вроде находятся, проблема у меня скорее в том, как правильно то что надо показать, а то что не надо скрыть

Проблема у вас с подходом к разработке. Вы навалили все в одну кучу. Есть же ООП, MVC используйте.

Вы в одной функции получаете данные, тут же навешиваете обработчики событий тут же фильтруете. Винегрет из кода.

зачем вы добавляете данные на карту 2 раза

                homeMap.geoObjects.add(res.geoObjects);                res.geoObjects.options.set({ balloonContentBodyLayout: ymaps.templateLayoutFactory.createClass(balloonTpl)});            }));            myObjects.addToMap(homeMap);
Алексей Дмитриевич
20 июня 2014, 09:24

Спасибо тебе, О велийкий! Ты как всегда выручаешь меня и наставляешь на путь истинный в постижении api yandex map.

Алексей Дмитриевич
19 июня 2014, 17:10

И да, у меня API Другой версии, у меня используется 2.0.31