поиск по картам яндекс
 

Добрый день, уважаемые коллеги. Возможно вопрос не много не туда.
Но прошу помощи. Подскажите, пожалуйста, как делают поиск по карте яндекс, (нужно именно по яндекс), когда пользователь видит карту и кнопки с объектами, при клике например на кнопку - "школы", на карте появляются все близлежащие школы, по клику на "рестораны", скрываются школы, отображаются рестораны.
Пример - https://v-stremlenii.ru/?utm_source=...12665479848550

Может кто то подобное делал? Подскажите как это делается. Заранее благодарю.

Вот так можно делать поиск, но тут как бы есть строка поиска. А можно как то это сделать без строки?

function init() {
    var myMap = new ymaps.Map('map', {
        center: [55.74, 37.58],
        zoom: 13,
        controls: []
    });
    
    // Создадим экземпляр элемента управления «поиск по карте»
    // с установленной опцией провайдера данных для поиска по организациям.
    var searchControl = new ymaps.control.SearchControl({
        options: {
            provider: 'yandex#search'
        }
    });
    
    myMap.controls.add(searchControl);
    
    // Программно выполним поиск определённых кафе в текущей
    // прямоугольной области карты.
    searchControl.search('школы');
}

ymaps.ready(init);

Dolf,
что мешает перенести строку 20 на кнопку и создать ещё кучу подобных кнопок?

рони,
Без вот этого

var searchControl = new ymaps.control.SearchControl({
        options: {
            provider: 'yandex#search'
        }
    });

Не работает. Тоже думал что так получится. Но нет.

у них есть песочница:
https://yandex.ru/dev/maps/jsbox/2.1/search_control_ppo
Можно там сразу видеть как будет.

Dolf,
там есть пример Поиск по координатам — обратное геокодирование

рони,
Кажется что то работает вот так:

function init() {
    var myMap = new ymaps.Map('map', {
        center: [55.74, 37.58],
        zoom: 13,
       
    });
    
    // Создадим экземпляр элемента управления «поиск по карте»
    // с установленной опцией провайдера данных для поиска по организациям.
    var searchControl = new ymaps.control.SearchControl({
        options: {
            provider: 'yandex#search'
        }
    });
    
    myMap.controls.add(searchControl);
    
    // Программно выполним поиск определённых кафе в текущей
    // прямоугольной области карты.
    searchControl.search('больница');
}

ymaps.ready(init);

Наверное можно накинуть на кнопку нужное.

Dolf,
https://yandex.ru/dev/maps/jsbox/2.1/reverse_geocode/

здесь строка 12 скрипта reverse_geocode.js, перенести на кнопку

рони,
Все же тут можно использовать только для метро, городов.
А мне надо было для организаций. Но Вы правильно меня натолкнули в первом случае. Сейчас примерно вот так описал оно работает.

// Функция ymaps.ready() будет вызвана, когда
    // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
    ymaps.ready(init);
    function init(){
        // Создание карты.
        var myMap = new ymaps.Map("ymap", {
            // Координаты центра карты.
            // Порядок по умолчанию: «широта, долгота».
            // Чтобы не определять координаты центра карты вручную,
            // воспользуйтесь инструментом Определение координат.
            center: [<?= $centerX;?>, <?= $centerY;?>],
            // Уровень масштабирования. Допустимые значения:
            // от 0 (весь мир) до 19.
            zoom: <?= $zoom;?>,
            controls: ['zoomControl', 'typeSelector',  'fullscreenControl']
        }, {
                autoFitToViewport: 'always',
                searchControlProvider: 'yandex#search'
            }),
            objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: false,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 32,
            clusterDisableClickZoom: false,
        });

        // Чтобы задать опции одиночным объектам и кластерам,
        // обратимся к дочерним коллекциям ObjectManager.
        objectManager.objects.options.set('preset', 'islands#greenDotIcon');
        objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
        myMap.geoObjects.add(objectManager);
        objectManager.add(<?= $markers;?>);

        var searchControl = new ymaps.control.SearchControl({
            options: {
                maxWidth: 'small',
               // noPopup: true,
                provider: 'yandex#search'
            }
        });

        myMap.controls.add(searchControl);

        $(document).ready(function () {
            $('body').on('click', '.school', function () {
                let button = $('#school').text();
                searchControl.search(button);
            });
        });

        $(document).ready(function () {
            $('body').on('click', '.med', function () {
                let button = $('#med').text();
                searchControl.search(button);
            });
        });

        $(document).ready(function () {
            $('body').on('click', '.mol', function () {
                let button = $('#mol').text();
                searchControl.search(button);
            });
        });

        $(document).ready(function () {
            $('body').on('click', '.child', function () {
                let button = $('#child').text();
                searchControl.search(button);
            });
        });
    }

Можно развивать дальше думается. Спасибо Вам как всегда!

Наверняка есть более изящные решения. Но пока на первых парах так работает)

Dolf,
уберите все $(document).ready(function () {
и сделайте кнопки все одинаковыми, без id.

и тогда будет одна строка в js

$('body').on('click', '.search', function () {
                 searchControl.search(this.dataset.search);
            });

<button class="search" type="button" data-search="школа">школа</button> 
<button class="search" type="button" data-search="кафе">кафе</button>