Клуб API Карт

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

postboxlite
31 октября 2017, 13:46

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

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

Пробовал вставлять в обработчик собития кнопки (нашел в одном из ответов в другой теме). 

myMap.setBounds(multiRoute.getBounds(), {checkZoomRange:true});

Но такая конструкция работает как-то не корректно. Сначала сдвигается карта, а потом рисуется маршрут и получается что оба маршрута и пешеходный и автомобильный становятся частично не видны...

Код скрипта:

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);
});

Ссылка на исходники

7 комментариев
Покопался в том примере (https://yandex.ru/blog/mapsapi/60753#comment-add), там используется конструкция: 
multiRoute.model.events.add("requestsuccess", function() {
myMap.setBounds(multiRoute.getBounds(),{checkZoomRange:true});
Но к своей карте все равно не получается прикрутить...
postboxlite,
Все правильно. Выставить карте масштаб можно только после получения ответа от сервера
dimik,
Только проблема в том, что если просто добавить это в код, то карта совсем перестает работать. Чего-то не хватает, а вот чего - не понятно...
postboxlite,
соберите пример на jsfiddle, я посмотрю
dimik,
http://jsfiddle.net/rx2h3ood/6/
dimik,
http://jsfiddle.net/rx2h3ood/9/
Здравствуйте, в Клубе не публикуются вопросы пользователей API.


Технические вопросы Вы можете задать на Stack Overflow: https://ru.stackoverflow.com/questions/tagged/yandex-maps-jsapi