---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_view_options.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/multiroute_view_options.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Настройка отображения мультимаршрута
Open in CodeSandbox
Правила отображения маршрутов задаются в опциях маршрутизатора.
Для задания опций составных частей мультимаршрута доступны следующие префиксы:
- wayPoint - опции отображений путевых точек;
- wayPointStart - опции отображения начальной путевой точки;
- wayPointFinish - опции отображения конечной путевой точки;
- viaPoint - опции отображений транзитных точек;
- pin - опции отображений точечных маркеров в путевых точках;
- route - опции отображений маршрутов;
- routeActive - опции отображения активного маршрута;
- routePedestrianSegment - опции линий сегментов пешеходного маршрута;
- editor - опции редактора мультимаршрута (см. multiRouter.Editor).
В данном примере на карту добавляется два маршрута с разными опциями отображения. Как можно задать
два разных отображения для маршрутов, имеющих общую модель, см. в справочнике.
{% list tabs %}
- index.html
```html
Настройка отображения мультимаршрута
```
- multiroute_view_options.js
```js
function init() {
// Объявляем набор опорных точек и массив индексов транзитных точек.
var referencePoints = [
"Москва, Ленинский проспект",
"Москва, Льва Толстого, 16",
"Москва, Кремлевская набережная",
"Москва, парк Сокольники",
],
viaIndexes = [2];
// Создаем мультимаршрут и настраиваем его внешний вид с помощью опций.
var multiRoute = new ymaps.multiRouter.MultiRoute(
{
referencePoints: referencePoints,
params: { viaIndexes: viaIndexes },
},
{
// Внешний вид путевых точек.
wayPointStartIconColor: "#333",
wayPointStartIconFillColor: "#B3B3B3",
// Задаем собственную картинку для последней путевой точки.
wayPointFinishIconLayout: "default#image",
wayPointFinishIconImageHref: "leaf.svg",
wayPointFinishIconImageSize: [30, 30],
wayPointFinishIconImageOffset: [-15, -15],
// Позволяет скрыть иконки путевых точек маршрута.
// wayPointVisible:false,
// Внешний вид транзитных точек.
viaPointIconRadius: 7,
viaPointIconFillColor: "#000088",
viaPointActiveIconFillColor: "#E63E92",
// Транзитные точки можно перетаскивать, при этом
// маршрут будет перестраиваться.
viaPointDraggable: true,
// Позволяет скрыть иконки транзитных точек маршрута.
// viaPointVisible:false,
// Внешний вид точечных маркеров под путевыми точками.
pinIconFillColor: "#000088",
pinActiveIconFillColor: "#B3B3B3",
// Позволяет скрыть точечные маркеры путевых точек.
// pinVisible:false,
// Внешний вид линии маршрута.
routeStrokeWidth: 2,
routeStrokeColor: "#000088",
routeActiveStrokeWidth: 6,
routeActiveStrokeColor: "#E63E92",
// Внешний вид линии пешеходного маршрута.
routeActivePedestrianSegmentStrokeStyle: "solid",
routeActivePedestrianSegmentStrokeColor: "#00CDCD",
// Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
boundsAutoApply: true,
}
);
// Настраиваем внешний вид второй точки через прямой доступ к ней.
customizeSecondPoint();
// Создаем кнопки.
var removePointsButton = new ymaps.control.Button({
data: { content: "Удалить промежуточные точки" },
options: { selectOnClick: true },
}),
routingModeButton = new ymaps.control.Button({
data: { content: "Пешком" },
options: { selectOnClick: true },
});
// Объявляем обработчики для кнопок.
removePointsButton.events.add("select", function () {
multiRoute.model.setReferencePoints(
[
referencePoints[0],
referencePoints[referencePoints.length - 1],
],
[]
);
});
removePointsButton.events.add("deselect", function () {
multiRoute.model.setReferencePoints(referencePoints, viaIndexes);
// Т.к. вторая точка была удалена, нужно заново ее настроить.
customizeSecondPoint();
});
routingModeButton.events.add("select", function () {
multiRoute.model.setParams({ routingMode: "pedestrian" }, true);
});
routingModeButton.events.add("deselect", function () {
multiRoute.model.setParams({ routingMode: "auto" }, true);
});
// Функция настройки внешнего вида второй точки.
function customizeSecondPoint() {
/**
* Ждем, пока будут загружены данные мультимаршрута и созданы отображения путевых точек.
* @see https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel-docpage/#event-requestsuccess
*/
multiRoute.model.events.once("requestsuccess", function () {
var yandexWayPoint = multiRoute.getWayPoints().get(1);
// Создаем балун у метки второй точки.
ymaps.geoObject.addon.balloon.get(yandexWayPoint);
yandexWayPoint.options.set({
preset: "islands#grayStretchyIcon",
iconContentLayout: ymaps.templateLayoutFactory.createClass(
'Яндекс'
),
balloonContentLayout:
ymaps.templateLayoutFactory.createClass(
"{{ properties.address|raw }}"
),
});
});
}
// Создаем карту с добавленной на нее кнопкой.
var myMap = new ymaps.Map(
"map",
{
center: [55.739625, 37.5412],
zoom: 7,
controls: [removePointsButton, routingModeButton],
},
{
buttonMaxWidth: 300,
}
);
// Добавляем мультимаршрут на карту.
myMap.geoObjects.add(multiRoute);
}
ymaps.ready(init);
```
{% endlist %}