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

Question

（对于 Mapbox 和 JS 来说相当新，所以我有点不知所措）我正在开发一个页面，用户需要调整地图容器的大小。它需要能够获得调整大小的地图的准确边界和中心点（通过map.getBounds和map.getCenter）。

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

平移/缩放会导致更新的中心和边界。浏览器窗口调整大小（如果将宽度或高度设置为 100%）也可以。我希望更改容器尺寸会调整中心和边界。

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

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

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

调整大小后的地图定位

例如，如果地图的宽度和高度突然加倍，则地图应如何更新，至少有三个有效选项：

1. 保持南北边界不变，扩大东边界和南边界。（向右和向下扩大观看区域）
2. 向外移动所有四个边界（将地图的中心保持在同一位置）
3. 将所有四个边界保留在原来的位置，但更改缩放比例，以便显示相同的地理区域，但显示更多详细信息。

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

地图无法正确重绘

您的第二个问题是，当您调整大小时，调用map.resize()不会正确更新地图的内部大小，并且您会留下空白区域。原因是您正在使用动画 CSS 属性。所以当你这样做时：

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

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

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

您可能可以收听更好的活动，以便随着地图区域的扩展不断更新。

在这里更新了小提琴：http ://jsfiddle.net/xcow63sm/11/

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