Yandex MAP API + Mysql

218
30 марта 2019, 01:30

мне нужно сделать фильтр меток на карте используя Yandex map API.Вопрос заключается в том что нужно вывести данные из базы и потом используя фильтры выводить или скрывать метки на карте. Я вывел метки на карту и добавил фильтры но как сделать что бы метки скрывались не понимаю, прошу помощи или подсказки как мне это реализовать. Вот код как сейчас это работает:

  <script>

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [59.9386300, 30.3141300],
            zoom: 9,
             controls: []
        }); 
    var arrList = $('#prof_ul li').map(function(){
            return $(this).attr('id');
        }).get();
    var arrList2 = $('#obr_ul li').map(function(){
            return $(this).attr('id');
        }).get();
    var arrList3 = $('#napravlenie_ul li').map(function(){
            return $(this).attr('id');
        }).get();
    // Создадим 5 пунктов выпадающего списка.
    var listBoxItems = arrList
        .map(function(title) {
            return new ymaps.control.ListBoxItem({
                data: {
                    content: title
                },
                state: {
                    selected: true
                }
            })
        }),
        // Теперь создадим список, содержащий 5 пунктов.
        listBoxControl = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр по профессиям',
                title: 'Фильтр по профессиям'
            },
            items: listBoxItems,
            state: {
                // Признак, развернут ли список.
                expanded: true,
                filters: listBoxItems.reduce(function(filters, filter) {
                    filters[filter.data.get('content')] = filter.isSelected();
                    return filters;
                }, {})
            }
        });
    myMap.controls.add(listBoxControl);

        // Создадим 5 пунктов выпадающего списка.
    var listBoxItems2 = arrList2
        .map(function(title) {
            return new ymaps.control.ListBoxItem({
                data: {
                    content: title
                },
                state: {
                    selected: true
                }
            })
        }),
        // Теперь создадим список, содержащий 5 пунктов.
        listBoxControl2 = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр по образовательному учереждению',
                title: 'Фильтр по образовательному учереждению'
            },
            items: listBoxItems2,
            state: {
                // Признак, развернут ли список.
                expanded: true,
                filters: listBoxItems2.reduce(function(filters, filter) {
                    filters[filter.data.get('content')] = filter.isSelected();
                    return filters;
                }, {})
            }
        });
    myMap.controls.add(listBoxControl2);

        // Создадим 5 пунктов выпадающего списка.
    var listBoxItems3 = arrList3
        .map(function(title) {
            return new ymaps.control.ListBoxItem({
                data: {
                    content: title
                },
                state: {
                    selected: true
                }
            })
        }),
        // Теперь создадим список, содержащий 5 пунктов.
        listBoxControl3 = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр по направлению',
                title: 'Фильтр по направлению'
            },
            items: listBoxItems3,
            state: {
                // Признак, развернут ли список.
                expanded: true,
                filters: listBoxItems3.reduce(function(filters, filter) {
                    filters[filter.data.get('content')] = filter.isSelected();
                    return filters;
                }, {})
            }
        });
    myMap.controls.add(listBoxControl3);

     // Добавим отслеживание изменения признака, выбран ли пункт списка под номером #3 .
    listBoxControl3.events.add(['select', 'deselect'], function(e) {
        var listBoxItem3 = e.get('target');
        var filters = ymaps.util.extend({}, listBoxControl3.state.get('filters'));
        filters[listBoxItem3.data.get('content')] = listBoxItem3.isSelected();
        listBoxControl3.state.set('filters', filters);
    });
    var filterMonitor = new ymaps.Monitor(listBoxControl3.state);
    filterMonitor.add('filters', function(filters) {
        // Применим фильтр.
        objectManager.setFilter(getFilterFunction(filters));
    });
    function getFilterFunction(categories){
        return function(obj){
            var content = obj.properties.balloonContent;
            return categories[content]
        }
    }
    $.ajax({
        url: "data.json"
    }).done(function (data) {
        objectManager.add(data);
    });

    <?php 
foreach ($maps as $maps) {
    print '
        // Собственное изображение для метки с контентом
    var placemark'.$maps['id'].' = new ymaps.Placemark('.$maps['cardination'].', {
        hintContent: "Улица: '.$maps['street'].' <br> Организация : '.$maps['name'].' <br> Категория: '.$maps['category'].'",
        "balloonContent": "'.$maps['prof'].'", "clusterCaption": "'.$maps['zavedenie'].'", "iconCaption": "'.$maps['naprav'].'",
    }, {
        // Опции.
        // Необходимо указать данный тип макета.
        iconLayout: "default#image",
        // Своё изображение иконки метки.
        iconImageHref: "'.$maps['image'].'",
        // Размеры метки.
        iconImageSize: [32, 32],
        // Смещение левого верхнего угла иконки относительно
        // её "ножки" (точки привязки).
        iconImageOffset: [-16, -16],
    });
    myMap.geoObjects.add(placemark'.$maps['id'].');
    ';
 }
    ?>

}); 

</script>

Код взят и адаптирован с официальной страницы api yandex, я так понимаю нужно получить файл json вот в этой строке

$.ajax({
            url: "data.php"
        }).done(function (data) {
            objectManager.add(data);
        });

но как мне это сделать связав с базой ?

Формат json файла должен выглядеть так:

{"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContent": "Аптека", "clusterCaption": "Аптека", "hintContent": "Аптека", "iconCaption": "Аптека"}, "options": {"preset": "islands#blueCircleDotIconWithCaption"}})]
Answer 1

Решил вопрос, теперь я получаю значение но не могу скрыть метки которые нужно если кто знает подскажите.

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [59.9386300, 30.3141300],
            zoom: 9,
             controls: []
        }); 

    <?php 
foreach ($maps as $maps) {
    if($maps['prof'] == 1) {
    print '
        // Собственное изображение для метки с контентом
    var placemark'.$maps['id'].' = new ymaps.Placemark('.$maps['cardination'].', {
        hintContent: "Улица: '.$maps['street'].' <br> Организация : '.$maps['name'].' <br> Категория: '.$maps['category'].'",
        "balloonContent": "'.$maps['prof'].'", "clusterCaption": "'.$maps['zavedenie'].'", "iconCaption": "'.$maps['naprav'].'",
    }, {
        // Опции.
        // Необходимо указать данный тип макета.
        iconLayout: "default#image",
        // Своё изображение иконки метки.
        iconImageHref: "'.$maps['image'].'",
        // Размеры метки.
        iconImageSize: [32, 32],
        // Смещение левого верхнего угла иконки относительно
        // её "ножки" (точки привязки).
        iconImageOffset: [-16, -16],
    });
    myMap.geoObjects.add(placemark'.$maps['id'].');
    ';
 }
}
    ?>

    var arrList = $('#prof_ul li').map(function(){
            return $(this).attr('id');
        }).get();
    var arrList2 = $('#obr_ul li').map(function(){
            return $(this).attr('id');
        }).get();
    var arrList3 = $('#napravlenie_ul li').map(function(){
            return $(this).attr('id');
        }).get();
    // Создадим 5 пунктов выпадающего списка.
    var listBoxItems = arrList
        .map(function(title) {
            return new ymaps.control.ListBoxItem({
                data: {
                    content: title
                },
                state: {
                    selected: true
                }
            })
        }),
        // Теперь создадим список, содержащий 5 пунктов.
        listBoxControl = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр по профессиям',
                title: 'Фильтр по профессиям'
            },
            items: listBoxItems,
            state: {
                // Признак, развернут ли список.
                expanded: true,
                filters: listBoxItems.reduce(function(filters, filter) {
                    filters[filter.data.get('content')] = filter.isSelected();
                    return filters;
                }, {})
            }
        });
    myMap.controls.add(listBoxControl);

      listBoxControl.events.add(['select', 'deselect'], function (e) {
            var selectedFilters = listBoxControl.filter(function (it) {
                return it.isSelected();
            });
            applyFilters(selectedFilters);
        });

        function applyFilters(filters,myMap,geoObjects) {
            filters.forEach(function (filter,myMap,geoObjects) {

                <?php 
                foreach ($prof_main as $prof_main) {
                    print '
                        if(filter.data.get("content") == '.$prof_main['name'].') {
                          console.log("'.$prof_main['name'].'");
                             for (var i = 0; i< geoObjects.length; i++) {
                                console.log(i);
                                geoObject.options.set("visible", false);    
                            }
                        }
                    ';
                }
                ?>

            })
        }



}); 

</script>
READ ALSO
Обработка exec() в PHP

Обработка exec() в PHP

Необходимо запустить python скрипт из phpИспользую следующий код

158
WebView доступ к камере и фотографиям

WebView доступ к камере и фотографиям

я написал адаптивный сайт и через мобильный браузер работает отлично, но когда я открываю через webview на андроиде, камера и добавление фото...

177
Переменные из массива [закрыт]

Переменные из массива [закрыт]

Как вытащить переменные из массива?

133
Как заменить цифры из массива

Как заменить цифры из массива

голову уже сломал есть массив $arr = array('a'=>'01','A'=>'02','g'=>'03','e'=>'04','c'=>'05','d'=>'06','V'=>'07','O'=>'08','K'=>'09','X'=>'11','F'=>'12','T'=>'13','h'=>'14','n'=>'15','B'=>'16','Q'=>'17','M'=>'18','t'=>'19');

215