我正在使用react-leaflet 在此地图上显示一个纬度位置作为标记，使用 OSM（开放街道地图）。 Following the basic example of the react-leaflet docs，我的标记和地图的中心，总是在地图的左上角对齐。
我希望地图居中，以便标记位于地图周围框的中心，但它似乎不起作用。
有人有想法吗？
【问题讨论】：
标签： javascript reactjs leaflet react-leaflet
实际上我可以找出问题所在。与 StackOverflow 上关于该主题的其他问题类似，它与模态动画有关（一个信息，我可能在我的问题中没有提及）。
但是，包含地图的模态框需要大约一秒钟的时间来制作动画（简单的从左到右的动画）。地图本身，一旦模态被渲染就开始渲染（反应渲染机制为我处理） - 因此，只要模态出现在屏幕上，地图就会被渲染，但比它要动画的大小要小得多到。
此时，地图仅渲染可见部分 - 大约是所需最终大小的 20%。
模态框使用 spring 库来制作动画。该库提供了在动画开始和结束时立即运行的回调函数。
因为我不想为它设置新的上下文，所以我决定为模式使用已经存在的 redux 状态——我用标志animationEnded 更新了它——默认为false。每当模式打开并停止其动画时，标志就会更新。
在我渲染地图的组件中，我使用 redux 存储挂钩来等待模态动画结束 - 同时显示加载指示器。
动画一停止，我就让 react 渲染地图。
在开始渲染地图之前，我必须确保动画真的停止 - 所以像“setTimeout”这样的解决方案根本不适合我（除了它是糟糕的代码 - 某些浏览器渲染可能需要更长的时间，有些可能更快，而且“setTimeout”并不是真的等待，而是等到事件循环让它运行）。幸运的是，模态组件提供了一种让我知道动画何时结束的方法。
我希望这对以后的其他人有所帮助。
【讨论】：