首先我们简单描述一下问题:home 和 about 点击之后可以切换路由,并且home和about都是含有百度地图的页面。再经过多次切换路由之后,页面会重新加载!
在经过多次点击之后,我们打开f12发现有一个log飘过,但是再刷新之后不会保存,首先我们保存log!先点击最右边的设置,然后选择preserve log,日志就能保存啦!再切换几次路由,看看到底显示的是什么!
经过保存路由之后,我们发现显示为
查询了一下发现是因为大部分浏览器对单个页面能运行的WebGL上下文是有限制的,例如PC上的chrome或firefox也就运行十五六个,手机平板等移动终端会更受限,因此如果出现内存泄露老的上下文没关闭,超越上限时就会出现类型”Too many active WebGL contexts. Oldest context will be lost.”的异常。
的确,我们百度地图使用的版本JavaScript API GL v1.0是用WebGL实现的,我们多次切换路由,每次都会 new BMapGL.Map 从而出现了报错,所以我们每次离开页面之前都要销毁,即调用destroy方法,我是在vue的destroyed的钩子中调用的。