移动端H5页面高德地图使用react-activation的KeepAlive缓存之后路由回来导致地图消失白屏
问题:移动端H5页面在某个初始页面使用高德地图并且对该页面做KeepAlive缓存,跳转至后续页面,当后续页面也存在地图的时候,回到缓存页面导致原本初始地图页面白屏。
现象:
原始:
缓存路由回退初始页面白屏现象:
可以发现canvas的宽高被重置了。。
原因:canvas绘制后续组件的内容之后,点击某个按钮改变canvas高度,引起画布重绘,导致之前的高德地图的画布内容会丢失。
解决方式:
在组件激活的时候重新resize地图实例
useActivate(() => { mapIns && mapIns.resize(); });
Edited by a7