主页 / 问题 / 1129807
Accepted
Игорь
Asked:2020-05-22 21:36:45 +0000 UTC2020-05-22 21:36:45 +0000 UTC

如何将封闭容器中的 Yandex 地图居中？

  • 772

我正在尝试使用封闭容器中的路线将 Yandex 地图中构建的路线居中。route 方法有一个选项mapStateAutoApply: true，但它在隐藏容器中不起作用。几何route.geometry 返回null，因此也不采用setBound 。

还有哪些其他方法可以将地图集中在构建的路线上？哦，是的，如果地图上还有其他元素，还有myMap.setBounds(myMap.geoObjects.getBounds()); 也不适合，您需要将所需路线居中。

附上示例：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. Best Answer

    您可以像这样确定构造路线的边界：

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

    但是，封闭容器中的地图的 setBounds 仍然不起作用。有必要跟踪按钮点击并挂在它上面 newMap.setBounds(routeBounds); .

    或者您可以通过缩放将路线的边界转换为分的坐标。通过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

    • 0

相关问题