在 Chrome 和 Firefox 中打印预览后传单损坏

Question

这仅适用于 Chrome 和 FireFox

我有一个使用传单显示地图的角度项目。工作流程很简单：

1. 显示地图
2. 隐藏地图并显示其他信息
3. 选择打印（带来“打印预览”）
4. 再次显示地图 - 它会被破坏

这里是 jsFiddle 示例：http://jsfiddle.net/fRe3f/

no code needed

如果这对某人有帮助（在 Chrome 中测试）： 我附上了一堆事件，看看地图会发生什么（http://jsfiddle.net/cxZRM/）。

（当您缩放/移动地图时，我看到 moveStart、move、moveEnd 事件按此顺序触发。）

当地图可见并且您打印时，不会触发任何事件（传单不会被破坏）。当地图不可见并且您打印时，不会记录 moveStart 事件，然后只会触发 move 和 moveEnd。此外，查看调用堆栈的移动事件中的断点表明，leafLet 正在调用 invalidateSize 方法。

感谢您的帮助！

Answer 1

如果您只是重新调整浏览器的大小，它会自动修复 :-) 但这不是解决方法

我能够在我的逻辑中加入调用 invalidateSize() (https://github.com/Leaflet/Leaflet/issues/2826) 来修复地图（实际上，我必须使用 setTimeout(function(){map.invalidateSize();},100) - 我认为 angular 有点“窒息”它，我需要 setTimeout 因为 angular)。

希望这对某人有所帮助...