Задание собственного макета балуна мультимаршрута

Open in CodeSandbox

Макеты объектов можно создавать с помощью фабрики templateLayoutFactory, используя текстовые шаблоны.

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

<!DOCTYPE html>

<html>
    <head>
        <title>Задание собственного макета балуна мультимаршрута</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <link
            href="https://yandex.st/bootstrap/2.3.2/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script
            src="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <script
            src="multiroute_custom_balloon_layout.js"
            type="text/javascript"
        ></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            .my-balloon {
                display: inline-block;
                padding: 4px 10px;
                height: 75px;
                position: relative;
                bottom: 80px;
                left: -10px;
                width: 158px;
                font-size: 11px;
                line-height: 15px;
                color: #333333;
                text-align: left;
                vertical-align: middle;
                background-color: #fffff6;
                border: 1px solid #cdb7b5;
                border-radius: 6px;
                font-family: Arial;
            }
            .close {
                margin-top: -3px;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
    </body>
</html>

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.752625, 37.5981],
            zoom: 14,
            controls: [],
        }),
        /**
         * Создание собственного макета с помощью фабрики макетов.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/templateLayoutFactory.xml
         */
        balloonLayout = ymaps.templateLayoutFactory.createClass(
            "<div class='my-balloon'>" +
                '<a class="close" href="#">&times;</a>' +
                "<b>Маршрут {% if properties.type == 'driving' %}" +
                "на автомобиле<br/>" +
                "{% else %}" +
                "на общественном транспорте" +
                "{% endif %}</b><br />" +
                "Расстояние: " +
                "<i>{{ properties.distance.text }}</i>,<br />" +
                "Время в пути: " +
                "<i>{{ properties.duration.text }} (без учета пробок) </i>" +
                "</div>",
            {
                build: function () {
                    this.constructor.superclass.build.call(this);
                    this._$element = $(
                        ".my-balloon",
                        this.getParentElement()
                    );
                    this._$element
                        .find(".close")
                        .on("click", $.proxy(this.onCloseClick, this));
                },

                onCloseClick: function (e) {
                    e.preventDefault();
                    this.events.fire("userclose");
                },
            }
        ),
        /**
         * Создание мультимаршрута.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml
         */
        multiRoute = new ymaps.multiRouter.MultiRoute(
            {
                referencePoints: ["метро Арбатская", "метро Смоленская"],
                params: {
                    // avoidTrafficJams: true,
                    //routingMode: 'masstransit'
                },
            },
            {
                /**
                 * Макет геообъекта.
                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml#param-options
                 */
                balloonLayout: balloonLayout,
                // Отключаем режим панели для балуна.
                balloonPanelMaxMapArea: 0,
            }
        );

    myMap.geoObjects.add(multiRoute);
}

ymaps.ready(init);