React-leaflet：地图和标记未居中

Question

我正在使用react-leaflet使用OSM（开放式街道地图）在地图上显示latLng位置作为标记。 Following the basic example of the react-leaflet docs，我的地图[和center始终在地图的左上角对齐。

我希望地图居中，以便标记位于地图周围框的中心，但似乎不起作用。

有人有想法吗？

Answer 1

我的问题的答案

我错过了

实际上，我可以找出问题所在。与关于该主题的StackOverflow上的其他问题类似，它与模态动画有关（

一个信息，我可能在我的问题中可能没有提到]。

但是，包含地图的模态需要大约一秒钟的时间来进行动画处理（简单的从左向右流动的动画）。地图本身会在渲染模态后立即开始渲染（反应渲染机制会为我处理）-因此，只要模态出现在屏幕上，地图就会被渲染，但比其要进行动画制作的尺寸要小到。

此时，地图仅呈现可见部分-大约是所需最终尺寸的20％。

我的解决方案

模态使用

spring库进行动画处理。该库提供了在动画开始和结束时立即运行的回调函数。因为我不想为其设置新的上下文，所以我决定为模态使用一个已经存在的redux状态-我用一个标志animationEnded更新了-默认为false。每当模态打开并停止它的动画时，该标志就会更新。

在渲染地图的组件中，我在模态动画上使用redux store-hook进行了[[wait结束-同时显示了加载指示器。

动画一停止，我就做出反应来渲染地图。

结论

我必须确保动画真的

已停止

，然后再开始渲染地图-因此，像“ setTimeout”之类的解决方案根本不适合我（除了代码不好，某些浏览器可能需要更长的时间才能完成）渲染和某些渲染可能更快，并且“ setTimeout”并不是真正的[[wait，而是等到事件循环允许它运行为止）。幸运的是，模态组件提供了一种让我知道动画何时结束的方式。

我希望这会在将来对其他人有所帮助。