Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.04.2021, 20:34
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

поиск по картам яндекс
Добрый день, уважаемые коллеги. Возможно вопрос не много не туда.
Но прошу помощи. Подскажите, пожалуйста, как делают поиск по карте яндекс, (нужно именно по яндекс), когда пользователь видит карту и кнопки с объектами, при клике например на кнопку - "школы", на карте появляются все близлежащие школы, по клику на "рестораны", скрываются школы, отображаются рестораны.
Пример - 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, 21.04.2021 в 20:44. Причина: Дополнил
Ответить с цитированием
  #2 (permalink)  
Старый 21.04.2021, 21:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,365

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

Последний раз редактировалось рони, 21.04.2021 в 21:41.
Ответить с цитированием
  #3 (permalink)  
Старый 21.04.2021, 21:23
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

рони,
Без вот этого
var searchControl = new ymaps.control.SearchControl({
        options: {
            provider: 'yandex#search'
        }
    });

Не работает. Тоже думал что так получится. Но нет.
Ответить с цитированием
  #4 (permalink)  
Старый 21.04.2021, 21:26
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

у них есть песочница:
https://yandex.ru/dev/maps/jsbox/2.1/search_control_ppo
Можно там сразу видеть как будет.
Ответить с цитированием
  #5 (permalink)  
Старый 21.04.2021, 21:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,365

Dolf,
там есть пример Поиск по координатам — обратное геокодирование
Ответить с цитированием
  #6 (permalink)  
Старый 21.04.2021, 21:54
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

рони,
Кажется что то работает вот так:
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);


Наверное можно накинуть на кнопку нужное.
Ответить с цитированием
  #7 (permalink)  
Старый 21.04.2021, 22:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,365

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

здесь строка 12 скрипта reverse_geocode.js, перенести на кнопку
Ответить с цитированием
  #8 (permalink)  
Старый 22.04.2021, 17:34
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

рони,
Все же тут можно использовать только для метро, городов.
А мне надо было для организаций. Но Вы правильно меня натолкнули в первом случае. Сейчас примерно вот так описал оно работает.
// Функция 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);
            });
        });
    }

Можно развивать дальше думается. Спасибо Вам как всегда!
Ответить с цитированием
  #9 (permalink)  
Старый 22.04.2021, 17:36
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

Наверняка есть более изящные решения. Но пока на первых парах так работает)
Ответить с цитированием
  #10 (permalink)  
Старый 22.04.2021, 18:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,365

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Усовершенствование поиска по сайту от Яндекс zawm jQuery 0 09.02.2015 19:14
Сделать поиск со стороннего сайта kozlik Работа 1 19.09.2014 11:23
Удаление 25 летних cookies от Яндекс Почты glebbrain Общие вопросы Javascript 6 30.08.2013 16:35
Яндекс и Google у вас... greatilya Оффтопик 52 21.12.2011 14:19
Поиск в тексте javascript jQuery 3 31.05.2011 10:40