反應傳單：Map 和標記未居中

Question

我正在使用react-leaflet使用 OSM（開放街道地圖）在此 map 上顯示一個 latLng position 作為標記。 按照 react-leaflet 文檔的基本示例，我的標記和 map 的中心始終在 map 的左上角對齊。

我希望 map 居中，以便標記位於地圖周圍框的中心，但它似乎不起作用。

有人有想法嗎？

Answer 1

我的問題的答案

我錯過了什么

其實我可以找出問題所在。 與 StackOverflow 上關於該主題的其他問題類似，它與模態 animation （一個信息，我可能在我的問題中沒有提及）有關。

但是，包含 map 的模態需要大約一秒鍾的時間來制作動畫（簡單的從左到右的動畫）。 map 本身，一旦模態被渲染就開始渲染（反應渲染機制為我處理） - 所以 map 在模態出現在屏幕上時立即被渲染，但比它要動畫的尺寸小得多至。

此時，map 僅渲染可見部分 - 大約是所需最終尺寸的 20%。

我的解決方案

該模態使用spring庫進行動畫處理。 該庫提供了在 animation 啟動和結束時立即運行的回調函數。 因為我不想為它設置一個新的上下文，所以我決定使用一個已經存在的 redux state 作為模態 - 我用標志animationEnded更新了 - 默認為false 。 每當模態打開和停止它是 animation 時，標志就會更新。

在我渲染 map 的組件中，我使用 redux 存儲掛鈎等待模式 animation 結束 - 同時我顯示加載指示器。

一旦 animation 停止，我讓 react 渲染 map。

結論

在我開始渲染 map 之前，我必須確保 animation 真的停止了 - 所以像“setTimeout”這樣的解決方案根本不適合我（除了它是壞代碼 - 某些瀏覽器可能需要更長的時間來渲染，而有些可能會更快而且“setTimeout”並沒有真正等待，而是等到事件循環讓它運行）。 幸運的是，模態組件提供了一種讓我知道 animation 何時結束的方法。

我希望這將在未來對其他人有所幫助。