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