Click route change

Question

Is there any way to fix the code so that when you click on the link the route changes? Those. In the second value of the route "Новый город" value from the data-map ( pos ) was substituted and the route was changed?

If I put onclick inside the init() card is not initialized before the click.

 $('.map__link').on('click', function(e){ e.preventDefault(); var pos = $(this).data('map'); }); $('.map__link').on('click', function(e){ e.preventDefault(); var pos = $(this).data('map'); return pos; }); function init () { // Объявляем набор опорных точек, и массив индексов транзитных точек. var referencePoints = [ "Россия, Москва", "Новый город" ]; // Создаем мультимаршрут и настраиваем его внешний вид с помощью опций. var multiRoute = new ymaps.multiRouter.MultiRoute({ referencePoints: referencePoints }, { // Внешний вид путевых точек. wayPointStartIconColor: "#000000", // Задаем собственную картинку для последней путевой точки. // wayPointFinishIconLayout: "default#image", // wayPointFinishIconImageHref: "images/sokolniki.png", wayPointFinishIconLayout: 'islands#icon', iconColor: '#0095b6', wayPointFinishIconImageSize: [30, 30], wayPointFinishIconImageOffset: [-15, -15], // Позволяет скрыть иконки путевых точек маршрута. // wayPointVisible:false, // Внешний вид транзитных точек. viaPointIconRadius: 7, viaPointIconFillColor: "#000088", viaPointActiveIconFillColor: "#fc6059", // Транзитные точки можно перетаскивать, при этом // маршрут будет перестраиваться. viaPointDraggable: true, // Позволяет скрыть иконки транзитных точек маршрута. // viaPointVisible:false, // Внешний вид точечных маркеров под путевыми точками. pinIconFillColor: "#000088", pinActiveIconFillColor: "#fc6059", // Позволяет скрыть точечные маркеры путевых точек. // pinVisible:false, // Внешний вид линии маршрута. routeStrokeWidth: 2, routeStrokeColor: "#000088", routeActiveStrokeWidth: 6, routeActiveStrokeColor: "#fc6059", // Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком. boundsAutoApply: true }); // Настраиваем внешний вид второй точки через прямой доступ к ней. customizeSecondPoint(); // Создаем кнопку. // var removePointsButton = 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(); // }); // Функция настройки внешнего вида второй точки. function customizeSecondPoint () { multiRoute.model.events.once("requestsuccess", function () { var yandexWayPoint = multiRoute.getWayPoints().get(1); // Создаем балун у метки второй точки. ymaps.geoObject.addon.balloon.get(yandexWayPoint); yandexWayPoint.options.set({ preset: "islands#icon", // iconContentLayout: ymaps.templateLayoutFactory.createClass( // '<span style="color: red;">Я</span>ндекс' // ), // balloonContentLayout: ymaps.templateLayoutFactory.createClass( // '{{ properties.address|raw }}' // ) }); }); } // Создаем карту с добавленной на нее кнопкой. var myMap = new ymaps.Map('map', { center: [55.739625, 37.54120], zoom: 7, // controls: [removePointsButton] }, { buttonMaxWidth: 300 }); // Добавляем мультимаршрут на карту. myMap.geoObjects.add(multiRoute); } ymaps.ready(init);

 #map { height: 400px; width: 100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <div id="map"></div> <a href="#" data-map="Москва" class="map__link active"> Схема 1 </a> <a href="#" data-map="Киев" class="map__link"> Схема 2 </a> <a href="#" data-map="Воронеж" class="map__link"> Схема 3 </a>

The label "code inspection" is code-review and not "how to solve the problem."
That is, "look, I have a working code, what's wrong with it"?
Should only one route be shown or all three, but one is active?
@Grundy, one active, by clicking on the corresponding button

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2016-11-28T10:43:44

The route is built immediately, so instead of substituting the value of "New City" to what is indicated in the date attribute, the route to the most suitable place is simply built.

Instead, you can move the declaration of handlers inside the init function and already inside the handlers, create routes and add / remove them from the map.

Also for the first run, you can immediately take the value from the active element.

The handler itself may look like this:

if the item is already active, do nothing.
remove the active class from the current active item.
Add a class to the active element that was clicked.
remove the added route from the map.
Add a new route to the map based on the data attribute.

Example:

 function createRoute(points) { var route = new ymaps.multiRouter.MultiRoute({ referencePoints: points }, { wayPointStartIconColor: "#000000", wayPointFinishIconLayout: 'islands#icon', iconColor: '#0095b6', wayPointFinishIconImageSize: [30, 30], wayPointFinishIconImageOffset: [-15, -15], viaPointIconRadius: 7, viaPointIconFillColor: "#000088", viaPointActiveIconFillColor: "#fc6059", viaPointDraggable: true, pinIconFillColor: "#000088", pinActiveIconFillColor: "#fc6059", routeStrokeWidth: 2, routeStrokeColor: "#000088", routeActiveStrokeWidth: 6, routeActiveStrokeColor: "#fc6059", boundsAutoApply: true }); customizeSecondPoint(route); return route; } // Функция настройки внешнего вида второй точки. function customizeSecondPoint(multiRoute) { multiRoute.model.events.once("requestsuccess", function() { var yandexWayPoint = multiRoute.getWayPoints().get(1); // Создаем балун у метки второй точки. ymaps.geoObject.addon.balloon.get(yandexWayPoint); yandexWayPoint.options.set({ preset: "islands#icon" }); }); } function init() { // Создаем карту с добавленной на нее кнопкой. myMap = new ymaps.Map('map', { center: [55.739625, 37.54120], zoom: 7, }, { buttonMaxWidth: 300 }); var activeRoute = createRoute(["Россия, Москва", $('.map__link.active').data('map')]); myMap.geoObjects.add(activeRoute) $('.map__link').on('click', function(e) { e.preventDefault(); if ($(this).hasClass('active')) return; $('.active').removeClass('active'); $(this).addClass('active'); // удаляем добавленные объекты myMap.geoObjects.removeAll(); var activeRoute = createRoute(["Россия, Москва", $(this).data('map')]); myMap.geoObjects.add(activeRoute) }); } ymaps.ready(init);

 #map { height: 400px; width: 100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <div id="map"></div> <a href="#" data-map="Минск" class="map__link active"> Схема 1 </a> <a href="#" data-map="Киев" class="map__link"> Схема 2 </a> <a href="#" data-map="Воронеж" class="map__link"> Схема 3 </a>

In the example above, routes are created on click each time, instead they can be created once and simply select the one you need.

In addition, it was not possible to use the remove method to remove the current route, so removeAll is used instead, which removes all objects.

In the current example, there is no difference, it certainly will not be if something other than one route is added to the map.

True, I have already done it differently - using the buttons new ymaps.control.Button and stylized them for myself, but your answer is certainly better!
@ElenaSemenchenko, in fact, not sure which is better, and if you yourself decided the question: add the solution as your own answer!
I still think that your answer is better, the main thing is more convenient!

HamSter HamSter 18k five 33 83 · Answer 2 · 2017-04-05T06:49:06

My decision at the time:

 function init () { // Точки маршрута для примера var pointA = "Россия, Москва, Ащеулов переулок, д 9", pointB = "коттеджный поселок Лесные Озёра, Россия, Московская область, Чеховский район", pointC = 'Россия, Воронеж ', pointD = 'Россия, Щелковское шоссе ' /** * Создаем мультимаршрут. * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml */ multiRoute = new ymaps.multiRouter.MultiRoute({ referencePoints: [ pointA, pointB ], params: { // Ограничение на максимальное количество маршрутов, возвращаемое маршрутизатором. results: 4 } }, { // Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком. boundsAutoApply: true, viaPointIconRadius: 7, viaPointIconFillColor: "#000088", viaPointActiveIconFillColor: "#E63E92", // Транзитные точки можно перетаскивать, при этом // маршрут будет перестраиваться. viaPointDraggable: true, // Внешний вид точечных маркеров под путевыми точками. pinIconFillColor: "#000088", pinActiveIconFillColor: "#E63E92", // Позволяет скрыть точечные маркеры путевых точек. // pinVisible:false, // Внешний вид линии маршрута. routeStrokeWidth: 2, routeStrokeColor: "#000088", routeActiveStrokeWidth: 6, routeActiveStrokeColor: "#E63E92", // Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком. boundsAutoApply: true }); // Создаем кнопку. var changePointsButton3 = new ymaps.control.Button({ data: {content: " "}, options: { selectOnClick: true, layout: ymaps.templateLayoutFactory.createClass( // Если кнопка не нажата, к ней применится css-стиль 'myButton' // Если кнопка нажата, к ней применятся css-стили 'myButton' и 'myButtonSelected'. "<div class='my-YButton my-YButton-3 {% if state.selected %}myButtonSelected{% endif %}' title='{{ data.title }}'>" + "{{ data.content }} Маршрут <span>" + "№ 1</span></div>" ) } }); var changePointsButton1 = new ymaps.control.Button({ data: {content: " "}, options: { selectOnClick: true, layout: ymaps.templateLayoutFactory.createClass( // Если кнопка не нажата, к ней применится css-стиль 'myButton' // Если кнопка нажата, к ней применятся css-стили 'myButton' и 'myButtonSelected'. "<div class='my-YButton my-YButton-1 {% if state.selected %}myButtonSelected{% endif %}' title='{{ data.title }}'>" + "{{ data.content }} Маршрут <span>" + "№ 2</span></div>" ) } }); var changePointsButton2 = new ymaps.control.Button({ data: {content: " "}, options: { selectOnClick: true, layout: ymaps.templateLayoutFactory.createClass( // Если кнопка не нажата, к ней применится css-стиль 'myButton' // Если кнопка нажата, к ней применятся css-стили 'myButton' и 'myButtonSelected'. "<div class='my-YButton my-YButton-2 {% if state.selected %}myButtonSelected{% endif %}' title='{{ data.title }}'>" + "{{ data.content }} Маршрут <span>" + "№ 3</span></div>" ) } }); // Объявляем обработчики для кнопки. // Первая кнопка карты changePointsButton1.events.add('select', function () { multiRoute.model.setReferencePoints([pointA, pointB]); }); changePointsButton1.events.add('deselect', function () { multiRoute.model.setReferencePoints([pointA, pointB]); }); // Вторая кнопка карты changePointsButton2.events.add('select', function () { var referencePoints = multiRoute.model.getReferencePoints(); referencePoints.splice(1, 0, 'Россия, Щелковское шоссе '); /** * Добавляем транзитную точку в модель мультимаршрута. * Обратите внимание, что транзитные точки могут находится только * между двумя путевыми точками, т.е. не могут быть крайними точками маршрута. * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel.xml#setReferencePoints */ multiRoute.model.setReferencePoints(referencePoints, [1]); }); changePointsButton2.events.add('deselect', function () { var referencePoints = multiRoute.model.getReferencePoints(); referencePoints.splice(1, 1); multiRoute.model.setReferencePoints(referencePoints, []); }); changePointsButton3.events.add('select', function () { multiRoute.model.setReferencePoints([pointA, pointC]); }); changePointsButton3.events.add('deselect', function () { multiRoute.model.setReferencePoints([pointA, pointB]); }); // Создаем карту с добавленными на нее кнопками. var myMap = new ymaps.Map('map', { center: [55.750625, 37.626], zoom: 7, controls: [changePointsButton1, changePointsButton2, changePointsButton3] }, { buttonMaxWidth: 300 }); // Добавляем мультимаршрут на карту. myMap.geoObjects.add(multiRoute); } ymaps.ready(init);

 #map { height: 498px; width: 100%; } .my-YButton { font-size: 1.375rem; line-height: 1.5rem; color: #0f3223; display: block; text-align: center !important; background: rgba(255,255,255,.8); width: 295px; border: 1px solid transparent; border-radius: 10px; margin-bottom: 20px; padding: 7px 0; position: relative; cursor: pointer; } .my-YButton { position: absolute; left: 100px; z-index: 9999; } .my-YButton-1 { top: 75px; } .my-YButton-2 { top: 159px; } .my-YButton-3 { top: 243px; } .my-YButton.myButtonSelected { border: 1px solid #0f3223; } .my-YButton span { font-weight: bold; display: block; text-align: center !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script> <div id="map"></div>

Cons: it is difficult to stylize, switching routes works something like a checkbox, ...

Answer 3 · 2018-08-08T13:49:17

This function is repeatedly mentioned in the documentation and examples. Please read the documentation.

multiRoute.model.setReferencePoints([point1, point2]));

The code changes the points to those specified inside the array. To edit points with a mouse, that is, methods:

multiRoute.editor.start(); and multiRoute.editor.stop();

The first allows you to drag points on the map with the mouse, and the second method closes the editing mode. By the button, for example.

Add a description of what the code is, what it does, why it should be used.
It is advisable to add an example of use based on the code from the question.
And also look at the next answer of the author of the question :)
@Grundy though I merged (But I clearly don’t understand what creation is in the right answer ..
@Grundy and why on the correct answer minus, and on the answer, which in no case can not be used with the capabilities of api, hangs 1 plus
The accepted answer is convenient and works everywhere, and most importantly was given in a timely manner!
Your answer can hardly be called an answer at all, some cues of the hint and no more, you can not see the working code.
Give a full answer and you will get a plus, or even much more!

Click route change

3 answers 3

More articles: