调整容器 Div 大小时，地图中心和边界不更新

Question

（对 Mapbox 和 JS 很陌生，所以我有点不知所措）我正在处理用户需要调整地图容器大小的页面。它需要能够获得调整大小的地图的准确边界和中心点（通过 map.getBounds 和 map.getCenter）。

当我用JS调整容器的大小时div，中心和边界没有调整。 Fiddle: http://jsfiddle.net/xcow63sm/3/

Panning/zooming 导致中心和边界更新。浏览器 window 调整大小（如果您将宽度或高度设置为 100%）也可以。我希望更改容器尺寸会调整中心和边界。

但是，如果您使用表单字段调整容器 div 的 height/width，则中心和边界不会。我试过了（越来越绝望）：

function resize (){
var inputwidth = document.getElementsByName("mapwidth")[0].value;
var inputheight = document.getElementsByName("mapheight")[0].value;
var mapDiv = document.getElementById('map');
var mapcenter = map.getCenter();
mapDiv.style.width = inputwidth;
mapDiv.style.height = inputheight;
map.updateSize();
map.update();
map.resize();
map.invalidateSize();
document.getElementById("mapcenter").value = mapcenter;

编辑：这似乎适用，但我无法理解：Resizing a leaflet map on container resize

Answer 1

如果我理解你，你有两个问题：你不喜欢地图大小改变后的定位方式，并且你变白了space。

调整大小后的地图定位

如果地图的宽度和高度突然加倍，至少有三个有效的选项可用于更新地图：

保持北界和西界不变，延伸东西界和南界。（向右向下扩大视野）
将所有四个边界向外移动（将地图的中心保持在同一位置）
将所有四个边界保留在原处，但更改缩放比例，以便显示相同的地理区域，但更详细。

我认为您的问题是 Mapbox 正在选择选项 1，但您想要其他两个选项之一。正如我认为您已经发现的那样，解决方案就是简单地自己计算并设置您想要的界限。

地图无法正确重绘

你的第二个问题是，当你调整大小时，调用 map.resize() 并没有正确更新地图的内部大小，你只剩下白色 space。这是因为您正在使用动画 CSS 属性。所以当你这样做时：

mapDiv.style.width = inputwidth;
mapDiv.style.height = inputheight;
map.resize();

这不起作用，因为地图的大小实际上尚未转换为新大小。您可以像这样解决它：

mapDiv.style.width = inputwidth;
mapDiv.style.height = inputheight;
window.setTimeout(()=>map.resize(), 500);

您可能会听到更好的事件，随着地图区域的扩大不断更新。

已更新 fiddle 此处：http://jsfiddle.net/xcow63sm/11/

顺便说一下，您应该查阅文档 here。我不确定你从哪里得到 map.updateSize() 但那不是 Mapbox-GL-JS :)

调整容器 Div 大小时，地图中心和边界不更新

Map Center & Bounds do not update when Container Div is Resized

mapbox-gl-js

调整大小后的地图定位

地图无法正确重绘