Версия:
Популярные примеры
Карта
Геообъекты
Балун и хинт
Элементы управления
Активные области
Кластеризация
GeoQuery
Поведения и события
Поиск по карте
Пробки
Местоположение пользователя
Маршрутизация
YMapsML
GeoXML
ObjectManager
Модульная система
Панорамы
Внешние модули

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

Сохранить как файлыЭкспорт на JSFiddle

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

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

\n\n\n","multiroute_custom_balloon_layout.js":"function init() {\n var myMap = new ymaps.Map('map', {\n center: [55.752625, 37.59810],\n zoom: 14,\n controls: []\n }),\n /**\n * Создание собственного макета с помощью фабрики макетов.\n * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/templateLayoutFactory.xml\n */\n balloonLayout = ymaps.templateLayoutFactory.createClass(\n \"
\" +\n '×' +\n \"Маршрут {% if properties.type == 'driving' %}\" +\n \"на автомобиле
\" +\n \"{% else %}\" +\n \"на общественном транспорте\" +\n \"{% endif %}

\" +\n \"Расстояние: \" +\n \"{{ properties.distance.text }},
\" +\n \"Время в пути: \" +\n \"{{ properties.duration.text }} (без учета пробок) \" +\n \"
\", {\n\n build: function () {\n this.constructor.superclass.build.call(this);\n this._$element = $('.my-balloon', this.getParentElement());\n this._$element.find('.close')\n .on('click', $.proxy(this.onCloseClick, this));\n },\n\n onCloseClick: function (e) {\n e.preventDefault();\n this.events.fire('userclose');\n }\n }\n ),\n /**\n * Создание мультимаршрута.\n * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml\n */\n multiRoute = new ymaps.multiRouter.MultiRoute({\n referencePoints: [\n \"метро Арбатская\",\n \"метро Смоленская\"\n ],\n params: {\n // avoidTrafficJams: true,\n //routingMode: 'masstransit'\n }\n }, {\n /**\n * Макет геообъекта.\n * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml#param-options\n */\n balloonLayout: balloonLayout,\n // Отключаем режим панели для балуна.\n balloonPanelMaxMapArea: 0\n });\n\n myMap.geoObjects.add(multiRoute);\n}\n\nymaps.ready(init);\n"},"resources":[],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/multiroute_custom_balloon_layout/"}
Пишете на JavaScript? У нас есть вакансии
Sun Sep 18 2022 20:10:14 GMT+0300 (Moscow Standard Time)