Маршрут не виден целиком (ymaps)

252
25 апреля 2018, 05:59

Есть карта с автомобильным маршрутом из точки А в точку Х и кнопкой. При активации кнопки маршрут меняется на пешеходный из точки В в точку Х, а при деактивации кнопки - маршрут возвращается в исходное состоянии.

Проблема в том, что при активации кнопки, часть пешеходного маршрута становится не видна. Как сделать так чтобы при изменении маршрута, изменялись границы карты и маршрут умещался целиком?

Сам скрипт:

ymaps.ready(function () {
// Задаём точки мультимаршрута.
var pointA = [57.357517, 37.594334], // Стадион
    pointB = [57.352960, 37.589776], // Вокзал
    pointX = "Кашин, улица Вонжинская, 2",
    /**
     * Создаем мультимаршрут.
     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml
     */
    multiRoute = new ymaps.multiRouter.MultiRoute({
        referencePoints: [
            pointA,
            pointX
        ],
        params: {
            //Тип маршрутизации - автомобильная маршрутизация.
            routingMode: 'auto'
        }
    }, {
        // Позволяет скрыть иконки путевых точек маршрута.
        wayPointVisible:false,
        // Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
        boundsAutoApply: true
    });
// Создаем кнопку.
var changePointsButton = new ymaps.control.Button({
    data: {content: "Как пройти"},
    options: {selectOnClick: true}
});
// Объявляем обработчики для кнопки.
changePointsButton.events.add('select', function () {
    //myMap.setBounds(multiRoute.getBounds(), {checkZoomRange:true});
    multiRoute.model.setReferencePoints([pointB, pointX]);
    multiRoute.model.setParams({routingMode: 'pedestrian'}, true);
    changePointsButton.data.set({content: 'Как проехать'});
});
changePointsButton.events.add('deselect', function () {     
    //myMap.setBounds(multiRoute.getBounds(), {checkZoomRange:true});
    multiRoute.model.setReferencePoints([pointA, pointX]);
    multiRoute.model.setParams({routingMode: 'auto'}, true);
    changePointsButton.data.set({content: 'Как пройти'});
});
// Создаем карту с добавленной на нее кнопкой.
var myMap = new ymaps.Map('YMapsID', {
    center: [57.358381, 37.613440],
    zoom: 12,
    controls: [changePointsButton]
}, {
    buttonMaxWidth: 300
});
// Отключаем масштабирование карты колесиком мыши
myMap.behaviors.disable('scrollZoom'); 
// Добавляем мультимаршрут на карту.
myMap.geoObjects.add(multiRoute);
});

Так же собрал пример на jsfiddle

Answer 1

Вы правильно хотели использовать событие requestsuccess, но дело в том, что в момент получения ответа от сервера сама геометрия маршрута еще не успевает измениться, поэтому в getBounds() возвращается старое значение.

Попробуйте так:

multiRoute.model.events.add("requestsuccess", function() {
  setTimeout(function () {
    myMap.setBounds(multiRoute.getBounds(),{checkZoomRange:true});
  }, 100);
});
READ ALSO
Изменение заднего фона в зависимости от выбранного изображения

Изменение заднего фона в зависимости от выбранного изображения

Необходимо, чтобы при загрузке изображения это же изображение появлялось размытым на заднем фоне

266
Как сделать отступ сверху?

Как сделать отступ сверху?

Есть меню под шапкой которое при прокрутке страницы подымается в верх, но над шапкой есть поиск и меню его перекрывает, как сделать отступ,...

230
Не рисует на canvas

Не рисует на canvas

Помогите, я решил попробовать написать игру на Javascript в своей игре я оспользую некоторое подобие ООП и вот когда я хочу сказать методу Draw из класса...

240
keypress не отслеживает стрелки на клавиатуре

keypress не отслеживает стрелки на клавиатуре

Мне нужно что-бы иммено когда держишь кнопку выводилась буква поэтому keyup и keydown не подойдут

231