关于使用高德地图 JS API 2.0时，遇到白屏问题

最近使用高德地图JSAPI2.0时，因为使用了一款H5播放器插件，渲染多个播放器实例时导致高德地图抛出createBuffer error 后白屏。咨询了高德那边的技术，说是因为显存满了导致的。但是查询之后发现高德那边没有提供关于怎么监听白屏或者报错的相关事件，所以只能通过监听页面元素来解决了。
因为高德地图是通过webGL来绘制的，所以可以通过以下代码来获取绘制内容

let dom = document.getElementsByClassName('amap-layer')[0]
console.log(dom) // 打印绘制的canvas
let canvasContent = canvas.getContext('webgl') // 因为高德地图是通过webGl来绘制的，所以只能通过getContext(‘webgl’)才能获取到内容
console.log(canvasContent)

打印canvasContent我们可以获取到canvas的绘制信息如下图

这里我们可以看到drawingBufferWidth和drawingBufferHeight 这两个属性，后来通过对比发现，高德地图白屏后这两个属性的值就变成了0，所以我们只需要在适当的时机去判断一下drawingBufferWidth或者drawingBufferHeight 的值是否等于0，就能判断高德地图是否白屏了，如果白屏了我们再重新去调用一下高德地图的创建方法即可