--- metadata: - name: generator content: Diplodoc Platform v5.39.1 alternate: - https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_custom_balloon_layout.md - https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/multiroute_custom_balloon_layout.md --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/ru/llms.txt # Задание собственного макета балуна мультимаршрута Open in CodeSandbox
multiRouter.MultiRoute, templateLayoutFactory

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

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

{% list tabs %} - index.html ```html Задание собственного макета балуна мультимаршрута
``` - multiroute_custom_balloon_layout.js ```js 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( "
" + '×' + "Маршрут {% if properties.type == 'driving' %}" + "на автомобиле
" + "{% else %}" + "на общественном транспорте" + "{% endif %}
" + "Расстояние: " + "{{ properties.distance.text }},
" + "Время в пути: " + "{{ properties.duration.text }} (без учета пробок) " + "
", { 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); ``` {% endlist %}