JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="multiroute_driving.js" type="text/javascript"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
<body>
<div id="map"></div>
</body>
</html>
JavaScript
function init () {
/**
* Создаем мультимаршрут.
* Первым аргументом передаем модель либо объект описания модели.
* Вторым аргументом передаем опции отображения мультимаршрута.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel.xml
*/
var multiRoute = new ymaps.multiRouter.MultiRoute({
// Описание опорных точек мультимаршрута.
referencePoints: [
[55.734876, 37.59308],
"Москва, ул. Мясницкая"
],
// Параметры маршрутизации.
params: {
// Ограничение на максимальное количество маршрутов, возвращаемое маршрутизатором.
results: 2
}
}, {
// Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
boundsAutoApply: true
});
// Создаем кнопки для управления мультимаршрутом.
var trafficButton = new ymaps.control.Button({
data: { content: "Учитывать пробки" },
options: { selectOnClick: true }
}),
viaPointButton = new ymaps.control.Button({
data: { content: "Добавить транзитную точку" },
options: { selectOnClick: true }
});
// Объявляем обработчики для кнопок.
trafficButton.events.add('select', function () {
/**
* Задаем параметры маршрутизации для модели мультимаршрута.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel.xml#setParams
*/
multiRoute.model.setParams({ avoidTrafficJams: true }, true);
});
trafficButton.events.add('deselect', function () {
multiRoute.model.setParams({ avoidTrafficJams: false }, true);
});
viaPointButton.events.add('select', function () {
var referencePoints = multiRoute.model.getReferencePoints();
referencePoints.splice(1, 0, "Москва,...