从jQuery调用Mapbox GL函数

Question

我在页面上有一个Mapbox地图，该地图加载到由jQuery控制的滑动面板中。

如果我更改浏览器窗口大小并切换面板，地图通常只会部分填充其容器。这是Mapbox GL API的已知问题。

从他们的文档：

如果你最初的东西，如显示隐藏地图：无 使用JavaScript动态展示它，它可能有一些问题出现 正确大小。地图在隐藏页面时无法计算出自己的尺寸 ，因为它在浏览器的计算中没有大小。

随着Mapbox GL JS你可以调用map.resize（）来检测和调整 地图

所以，我需要我的jQuery代码中调用从Mapbox的map.resize（）函数，当滑动面板打开。麻烦是，我似乎无法让它工作。我已经试过如下：

1: $(map).trigger('resize'); 
2: $(window.map).resize(); 
3: $(window.map).trigger('resize'); 
as well as 
4: $(window).trigger('resize'); 

事情是，我不知道我在这里的语法，并呼吁居住在另一种语言的功能，从内jQuery的正确的方法。我已确认'地图'对象是全球性的，因为直接在我的浏览器的开发工具控制台中输入map.resize() [即。修复了地图显示]。我似乎无法让jQuery来传递函数。

奇怪的是，$(window).trigger('resize')没有工作，因为手动调整浏览器窗口大小会自动触发'map.resize（）'函数[并修复地图渲染]。

编辑：

应该提到。我已经使map对象在全局可用：mapbox.js脚本中的window.map = map;，并确保mapbox.js脚本在jQuery之前加载，但仍然没有喜悦。

Answer 1

我终于设法解决了这个问题。问题是，我使用以触发地图重绘的代码如下：

//inside jQuery map click function 
$("#map").slideToggle(200); 
$(window.map).resize(); 

作为一个位一个jQuery新手，I [白痴]假设这些命令将顺序地触发，但是，当然，该slideToggle()动画是异步的。因此jQuery在滑动面板达到其最终尺寸之前调用Mapbox resize()函数。从而使地图默认为400x300px其后备大小

所有我需要做的是坚持调用Mapbox resize()成一个匿名函数，引发了slidetoggle()完成后：

$("#map").slideToggle(200, function() 
{ 
     $(window.map).resize(); 
}); 

还有一个轻微的视觉故障，因为地图最初会出现在400x300px，然后快速捕捉它的容器。但是，由于这是一个边缘情况，取决于用户在切换地图打开和关闭之间调整了浏览器窗口的大小，所以我认为它已经解决了。