Как центрировать route Яндекс карты из закрытого контейнера?

Question

Пытаюсь отцентрировать маршрут построенный в Яндекс Картах с помощью route в закрытом контейнере. У метода route есть опция mapStateAutoApply: true , но она не работает в скрытом контейнер. Геометрия route.geometry отдаёт null и setBound следовательно тоже не взять.

Какие есть еще способы центрировать карты на построенном маршруте? Ах да, если на карте еще могут быть другие элементы, и myMap.setBounds(myMap.geoObjects.getBounds()); тоже не подходит, нужно именно нужный route отцентрировать.

Пример прилагается: https://codepen.io/corsik/pen/LYpMeJP

ymaps.ready(init);
function init() {
  var newMap = new ymaps.Map(
    "map",
    {
      center: [55.745508, 37.435225],
      zoom: 13
    },
    {
      searchControlProvider: "yandex#search"
    }
  );

  let start = [55.75660176930596, 37.630121031491065],
    stop = [55.75887773480828, 37.626880923001075],
      myRoute = false;

  ymaps
    .route([start, stop], {
      mapStateAutoApply: true
    })
    .then(function (route) {
      route.getPaths().options.set({
        strokeColor: "0000ffff",
        opacity: 0.9
      });
    myRoute = route;
      // добавляем маршрут на карту
      newMap.geoObjects.add(route);
    });

  let container = $("#map");
  $("#show").click(() => {
    container.show();
    newMap.container.fitToViewport();
    newMap.geoObjects.each(function (geoObject) {
      console.log(geoObject);
    });

  });
  $("#hide").click(() => {
    container.hide();
  });
}

Answer 1

Определить Bounds построенного маршрута можно так:

routeBounds = myRoute.properties.get("boundedBy");

Однако setBounds для карты в закрытом контейнере всё равно не отрабатывает. Нужно отслеживать нажатие кнопки и вешать на неё newMap.setBounds(routeBounds);.

Либо можно конвертировать Bounds маршрута в координаты цента с зумом. через util.bounds и уже тогда применить setCenter, который сработает и в скрытом контейнере:

var $mapElement = $('#map'), routeBounds, routeCenterZoom
var routeCenterZoom = ymaps.util.bounds.getCenterAndZoom(
            routeBounds,
            [$mapElement.width(), $mapElement.height()]
        );
  newMap.setCenter(routeCenterZoom.center, routeCenterZoom.zoom)

Ваш пример с правками: https://codepen.io/YaCor/pen/rNxJppE

БЛОГ НА HUSL

Как центрировать route Яндекс карты из закрытого контейнера?

Ответы (1 шт):