0

Пытаюсь отцентрировать маршрут построенный в Яндекс Картах с помощью 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();
  });
}

1 ответ 1

0

Определить 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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.