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

如果我了解您，则会遇到两个问题：您不喜欢地图尺寸更改后的位置，并且会出现空白。

调整大小后的地图定位

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

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

我认为您的问题是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/

此外，您应该查阅文档here。我不确定您从哪里map.updateSize()来的，但这不是Mapbox-GL-JS：）

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

1 个答案:

调整大小后的地图定位

地图无法正确重绘