Изменение маршрута по клику

773
25 ноября 2016, 08:51

Можно ли как-то исправить код, что бы при клике на ссылку менялся маршрут. Т.е. во второе значение маршрута "Новый город" подставлялось значение из data-map (pos) и происходило плавное изменение маршрута?

      
     
 
    // $('.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>

READ ALSO
Как получить значение select?

Как получить значение select?

Подскажите как исправить скрипт, чтобы при выборе числа 2, у нас срабатывало условие

612
Почему функция не видит подфункцию в JS?

Почему функция не видит подфункцию в JS?

Прочел эту статью и не могу понять почему не работает:

445
Побитовое сравнение двух строк

Побитовое сравнение двух строк

Подскажите в чем проблемаЕсли строки одинаковые то "1", а если нет то undefined

449
Как уменьшить расстояние между блоками?

Как уменьшить расстояние между блоками?

Как уменьшить расстояние между блоками (расстояние указал красными стрелочками на картинке снизу) ?

585