vue中引入高德地图,高德版本为1.4.15,当显示地图时候,偶尔会突然黑屏,然后会自动恢复,查看控制台,会有警告:
WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
百度后,有人说不影响,但是有时候会太频繁,另外,有些canvas对象就不显示了,所以很奇怪
引入地图代码:
AMapLoader.load({
"key": "********************************", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": ['AMap.ToolBar','AMap.Driving',"AMap.Geocoder",'Map3D','AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.DistrictLayer'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins":['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件
},
"Loca": { // 是否加载 Loca, 缺省不加载
"version": '1.3.2' // Loca 版本,缺省 1.3.2
}
})
在 Vue 中引入高德地图时,查看控制台可能会出现警告:WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost。这表示在使用 WebGL 渲染地图时,当前的上下文已经丢失。
这种情况通常是由于网页代码中存在一些错误导致的。要解决这个问题,需要检查你的代码,确保它不会导致上下文丢失。例如,确保不会在渲染地图之前删除或重置 canvas 元素。
另外,可以尝试使用高德地图官方提供的示例代码作为参考,确保你的代码符合高德地图的使用规范。如果问题仍然存在,建议在高德地图官方网站上寻求更多帮助。
不知道题主解决了没有,我也遇到类似情况,好像是内存不足造成的