問題描述

我有一個包含傳單地圖的 <div>.在某些事件中，<div> 的高度將會改變.我想讓地圖調整到其周圍 <div> 的新尺寸，以便舊中心在調整后的更小或更大的地圖中居中.我嘗試使用 invalidateSize() 函數，但它似乎根本不起作用.在 map-container-resize 事件之后如何調整地圖大小和居中?

I have a <div> containing a leaflet map. Upon certain events the height of the <div> will be altered. I'd like for the map to resize to the new dimensions of its surrounding <div> so that the old center is centered in the resized smaller or larger map. I tried using the invalidateSize() function, but it doesn't seem to work at all. How can I resize and center the map after that map-container-resize event?

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

編輯以提供更多上下文:

地圖容器最初的樣式為

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

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

用戶單擊某個按鈕后，頁面底部會顯示另一個面板，并且地圖容器的高度將降低到小于 100%(例如 80%).

After a user clicks a certain button, another panel shows at the bottom of the page and the map-container's height will be reduced to something less than 100% (say 80%).

單擊此按鈕后，將觸發 map-container-resize 事件，以便我可以使地圖調整大小并以舊的(即在調整大小之前)中心為中心.然后，地圖本身也應調整為其初始高度的 80%.

Upon click on this button, the map-container-resize event is triggered so that I can make the map resize and center on its old (i.e. before the resizing happened) center. The map itself should then also be resized to 80% of its initial height.

invalidateSize 的 APi 文檔似乎是我想要的:

The APi doc for invalidateSize seemed to be what I wanted:

"檢查地圖容器大小是否改變，如果改變則更新地圖[...]"

"Checks if the map container size changed and updates the map if so [...]"

但是看看調用 invalidateSize 前后 getSize 函數的輸出，沒有什么不同，地圖保持原來的大小.

But having a look with the output of the getSize function before and after the call to invalidateSize, nothing is different, the map remains at its old size.

推薦答案

問題是 #map-container div 的大小調整是通過 css 轉換完成的.轉換尚未開始，更不用說結束了，此時調用了 invalidateSize，因此傳單地圖無法識別其周圍 div 的任何尺寸變化.

The problem is that the resizing of the #map-container div is done via a css transition. The transition hasn't started yet, let alone ended, when the call to invalidateSize happens so the leaflet map cannot recognize any change of dimensions of its surrounding div.

延遲觸發 map-container-resize 事件解決了這個問題.這樣:

Triggering the map-container-resize event with a delay solved the problem. This way :

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

這篇關于在容器調整大小時調整傳單地圖的大小的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！