0

Существует ли простой способ, например в конфигурации карт, добавить по клику на любое место карты стандартный балун, который появляется по клику на Яндекс.Картах с описанием места?

стандартный балун

Или для этого нужно обязательно писать свой кастомный балун?

1 ответ 1

0

В JS API Яндекс.Карт есть стандартный балун, но вот, какой именно контент в нём выводить, придётся определить самому. Из коробки балун как на самих Яндекс.Картах получить не удастся.

Как сделать балун с адресом по клику на карте

У карты есть событие click, которое вам нужно слушать, и метод карты balloon.open(), который позволяет открыть на ней стандартный балун. Вот тут есть интерактивный пример

Чтобы вывести адрес в точке клика нужно добавить обратное геокодирование:

myMap.events.add('click', function (e) {
    if (!myMap.balloon.isOpen()) {
        var coords = e.get('coords');
        ymaps.geocode(coords).then(function (res) {
          var firstGeoObject = res.geoObjects.get(0);
           myMap.balloon.open(coords, {
            contentHeader: firstGeoObject.getAddressLine(),
            contentBody: '<p>Координаты щелчка: ' + [
                coords[0].toPrecision(6),
                coords[1].toPrecision(6)
                ].join(', ') + '</p>'
         })
        });
    }
    else {
        myMap.balloon.close();
    }
});

Как добавить свои кнопки в балун

Чтобы в балуне появились кнопки, например, "маршрут" и "искать рядом", нужно создать свой макет балуна. В песочнице Яндекса есть подробный пример.

В целом, кастомный макет позволяет полностью видоизменить стандартный балун - настроить его под свой дизайн или повторить дизайн Яндекс.Карт.

Кроме того, потребуется провязать кнопки с контролами на карте. То есть отдельно добавить интерфейс построения маршрутов и строку поиска.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.