Mapbox 地图在页面加载时无法正确呈现

Question

在页面加载时，我只得到了我的 Mapbox 地图的部分渲染。如果您更改浏览器的宽度或检查页面，地图似乎会卡入到位并正确呈现。我能够在 JSFiddle My_Mapbox_Map 中重现这个问题。我尝试在所有地图逻辑完成后添加以下代码。

`setTimeout(function() { map.invalidateSize(); }, 200);`

这在 JSFiddle 中运行良好，但在我的应用程序中它最多只能在 50% 的时间内运行，而在 FireFox 上从不运行。多次刷新屏幕最终会导致地图只能部分渲染。

Answer 1

$timeout 用 0 秒包装对我有用。在 Firefox 中也已确认。

$timeout(function(){
    map.setView([39.53818, -79.43430000000001], 7);
},0);

Answer 2

超时时间不够长怎么办？如果您等到地图准备好设置视图，您就不会担心了。请参阅下面的参考代码和 jsfiddle 示例。

map.whenReady(function()  {
  map.setView([39.53818, -79.43430000000001], 7);
});

Mapbox map not rendering correctly on page load