從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，然後快速捕捉它的容器。但是，由於這是一個邊緣情況，取決於用戶在切換地圖打開和關閉之間調整了瀏覽器窗口的大小，所以我認爲它已經解決了。