Есть карта с автомобильным маршрутом из точки А в точку Х и кнопкой. При активации кнопки маршрут меняется на пешеходный из точки В в точку Х, а при деактивации кнопки - маршрут возвращается в исходное состоянии.
Проблема в том, что при активации кнопки, часть пешеходного маршрута становится не видна. Как сделать так чтобы при изменении маршрута, изменялись границы карты и маршрут умещался целицом?
Пробовал вставлять в обработчик собития кнопки (нашел в одном из ответов в другой теме).
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); });