javascript 调整容器大小时的活页Map大小

xxb16uws 于 2023-10-14 发布在 Java

关注(0)|答案(8)|浏览(120)

我有一个<div>包含传单Map。在某些情况下，<div>的高度将被改变。我想为Map调整其周围的<div>新的尺寸，使旧的中心是在调整大小较小或较大的Map中心。我尝试使用invalidateSize()函数，但它似乎根本不工作。在map-container-resize事件发生后，我如何调整Map的大小并使其居中？

$mapContainer.on('map-container-resize', function () {
   map.invalidateSize(); // doesn't seem to do anything
});

编辑以给予更多上下文：*

Map容器的初始样式为

#map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: height 0.5s ease-in-out;
}

在用户点击某个按钮后，另一个面板显示在页面底部，Map容器的高度将减少到小于100%（比如80%）。
单击此按钮后，将触发map-container-resize事件，以便我可以调整Map大小并将其集中在旧的（即，在发生事故之前）中心。Map本身也应该调整到其初始高度的80%。
invalidateSize的API文档似乎是我想要的：
“检查Map容器大小是否更改，如果更改，则更新Map[...]”
但是看看getSize函数在调用invalidateSize之前和之后的输出，没有什么不同，map仍然保持原来的大小。

JavaScript

来源：https://stackoverflow.com/questions/24412325/resizing-a-leaflet-map-on-container-resize

8条答案

按热度按时间

ttp71kqs1#

只需调用resize window事件，而不是定时加载Map。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

window.dispatchEvent(new Event('resize'));  

// Triggers a window resize 
// Thus your map automatically triggers invalidateSize().

赞(0）回复(0）举报 2023-10-14

f0brbegy2#

公认的答案有点古怪，因为它依赖于睡眠时间长于过渡时间。
我发现this工作得很好：

$("body").on($.support.transition.end, '#main-navbar .nav-collapse', function(event){    
    console.log("end of the animation");
});

赞(0）回复(0）举报 2023-10-14

pkwftd7m3#

运行VueJS，Leaflet 1.2.0时遇到了这个问题。这张照片并不像上面提到的其他人那样完整。我在VueJS中的解决方案是调用nextTick函数：

var vm = this
  var container = vm.$refs.container
  vm.mapStyle.width = `${vm.getElementContentWidth(container)}px`
  vm.mapStyle.height = `${vm.getElementContentHeight(container)}px`
  vm.$nextTick(() => {
    if (vm.map) vm.map.invalidateSize()
    if (vm.layerBase) vm.layerBase.redraw()
  })

我相信纯JavaScript

赞(0）回复(0）举报 2023-10-14

q9rjltbz4#

在2023年的mapbox-gl（v1.13.x）和Vue（v2.7）中，答案是相似的。我把这段代码放在mounted()处理程序中：

const resizeObserver = new ResizeObserver(() => {
  this.$nextTick(() => {
    this.map.resize(); // instead of invalidateSize, new API
    // make sure we are zoomed correctly
    // this.boundingBox is a computed property
    this.map.fitBounds(this.boundingBox);
  });
});
resizeObserver.observe(this.$refs.mapContainer);

赞(0）回复(0）举报 2023-10-14

vi4fp9gy5#

问题是#map-containerdiv的转换是通过css转换完成的。当调用invalidateSize时，转换还没有开始，更不用说结束了，因此传单Map无法识别其周围div的尺寸的任何变化。
延迟触发map-container-resize事件解决了这个问题。这样：

setTimeout(function(){ map.invalidateSize()}, 400);

赞(0）回复(0）举报 2023-10-14

blmhpbnm6#

我今天遇到了这个问题，想根据2020浏览器API提供一个更新的答案。这个例子使用浏览器的ResizeObserver来监视Leaflet也被挂载的div的大小。假设下面的HTML脚本：

<div id="map" />

使用以下JavaScript：

const mapDiv = document.getElementById("map");
const map = L.map(mapDiv).setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const resizeObserver = new ResizeObserver(() => {
  map.invalidateSize();
});

resizeObserver.observe(mapDiv);

这应该监视map div，并在map div大小更改时调用Leaflet map上的invalidateSize（）方法。这种方法允许您在“更接近”Map代码的地方处理对象，而不是试图依赖于窗口调整大小事件或侦听应用程序中其他地方触发的更改。
显然，Mapdiv本身的CSS需要确保它可以按照您想要的方式调整大小。此代码片段将确保在发生这种情况时适当更新传单。

赞(0）回复(0）举报 2023-10-14

vatpfxk57#

L.Map.invalidateSize()仅通知单张Map对象其容器大小已更改，因此应绘制更少或更多的Map瓦片。它实际上不会改变任何尺寸，例如。它包含<div>，并且不移动Map。你应该自己来。

赞(0）回复(0）举报 2023-10-14

bxfogqkk8#

你可以在resize后使用下面的代码，