高德地图Amap2.0注销清除不掉内存的解决方法

使用场景： 在单页面应用中(vue,react等)，使用地图组件，在切换页面(路由)时，当前高德的地图注销方法不能够完全清除，在多次重复切换(地图与其他页面)时，会导致内存疯狂增长，最后浏览器、页面的崩溃，目前高德地图2.0应该都会有这个问题，最后提交了高德的工单，得到反馈说问题确认存在，各位在使用过程中有没有发现？。

结局思路及办法：
更新日志：

2022-09-22：貌似高德结构有变，更新canvas画布获取方式~

//在项目中路由跳转时 在对应的组件销毁函数来说 通常会注销map，也就是
map.destroy()//在跳转直接销毁地图方法后，惊奇的发现，诶？？，内存没有被释放？。
//重复上述操作后发现，内存会越来越大，最后内存溢出了，浏览器也就崩溃了，
//在重复调研及提交高德地图的工单之后得到了，肯定的答案 (该问题已知存在)
//此时心里痛骂，项目就要上线，核心功能却有bug...,此时各位靓仔肯定会寻找解决或其他方法规避了吧？
//我也不例外，在寻找了和测试各种demo发现，在2.0的版本的无果，怎么都解决不掉，在一天的放空之后，灵感来了！。
//内存释放不掉就肯定会和页面在注销时 什么东西 没有被清掉 .那么首先从页面的报错消息排查。
//在经过一段时间的重复上述操作后，页面挂壁了。。 同时 控制台也出了报错的提示。
createBuffer error 的错误
// createBuffer ?? 好像很熟悉的鸭子.. 复制上百度。
//我说这么熟悉，，原来时webgl, 在想想，地图可能使用的webgl来渲染的,会不会是这玩意儿没有清掉？？。
//直接开干！ mdn搜索webgl，相关注销的方法，
//https://developer.mozilla.org/zh-CN/docs/Web/API/WEBGL_lose_context/loseContext
//虽然没找到直接干掉的方法，但是找到了丢失上下文的方法，废话不多说，直接cv
//注销的时候执行丢失方法，奇迹发生了，内存居然被干掉!,就是这么神奇！//下面是需要在注销时添加的代码
//var canvas = document.getElementById('canvas');
var canvas = document.querySelector('canvas.amap-layer');
//此处是获取高德生成的地图画布canvas元素，其他方式亦可
var gl = canvas.getContext('webgl');//监听上下文丢失-可不添加。
canvas.addEventListener('webglcontextlost', function(e) {console.log(e);
}, false);
//丢失上下文的方法
gl.getExtension('WEBGL_lose_context').loseContext();//上述代码可以封装为地图的destroy注销方法中中，
//直到现在 问题搞定，虽然内存还会有些涨(不确定是否时地图外的其他因素)，但是已经算是完美解决了，此方法送给各位开发者，大家有其他好用的方法，可以分享一下。

最后送上demo地址：https://github.com/faintout/AmapDemo

高德地图Amap2.0注销清除不掉内存的解决方法相关推荐

Vue对高德地图2.0的封装使用
在Vue项目里使用高德地图,网上有几个比较好用的,例如 AMap-Vue ,文档很好,但不开源 vue-amap ,文档让人流泪懒人和需求不复杂的,可以直接使用上面的.上面两开源的已经不太活跃了,用 ...
安卓系统的导航仪怎么设置导航启动路径为高德地图_界面功能焕然一新！高德地图10.0新版体验...
[PConline应用]近日高德地图10.0安卓版与iOS版同时上线,作为一名资深高德迷,我自然第一时间下载并更新了它.没让我失望的是,此次新版不但用上了全新的扁平式UI,各项功能模块也有了大幅进步, ...
高德地图搜索功能以及清除搜索结果maker
第一次写文章,写得不好各位看官见谅~ (pσ_σ)P 首先这是一个vue里面的项目,高德地图api是直接CDN进来的,所以使用了global来调用,默认已经初始化了一个地图,为了实现一个输入框搜索功能 ...
高德地图哪个语音包最好_高德地图app怎么录制语音包?高德地图将自己的语音用作导航语音包的方法介绍...
高德地图是一款中国专业的手机地图,拥有全面的地点信息,特色语音导航.智能路线规划,是我们常用的一款移动地图导航工具,用高德地图语音导航,可以听到很多明星的导航语音播报,当然你也可以自己录制语音包.那么 ...
Redis 5.0.3默认配置启动报错解决方法
Redis 5.0.3默认配置启动报错解决方法参考文章: (1)Redis 5.0.3默认配置启动报错解决方法 (2)https://www.cnblogs.com/miclesvic/p/1031 ...
通过pyenv在Mac OS X 10.12.3下安装Python-3.6.0及“*** [install] Error 1”错误的解决方法
通过pyenv在Mac OS X 10.12.3下安装Python-3.6.0及"*** [install] Error 1"错误的解决方法参考文章: (1)通过pyenv在Ma ...
安装DotNetCore.1.0.0-VS2015Tools.Preview2.exe 错误Error 0x81f40001 解决方法
安装DotNetCore.1.0.0-VS2015Tools.Preview2.exe 错误Error 0x81f40001 解决方法参考文章: (1)安装DotNetCore.1.0.0-VS20 ...
Vm下安装centos7.0时电脑进入黑屏的解决方法（选择Install Centos 7或者是Test this media install Centos 7以后，虚拟机屏幕立马就进入黑屏状态）
Vm下安装centos7.0时电脑进入黑屏的解决方法(选择Install Centos 7或者是Test this media & install Centos 7以后,虚拟机屏幕立马就进入黑 ...
Missing artifact com.oracle:ojdbc6:jar:11.2.0.3 Maven中不能引入ojdbc解决方法，错误
Missing artifact com.oracle:ojdbc6:jar:11.2.0.3 Maven中不能引入ojdbc解决方法,错误参考文章: (1)Missing artifact com ...

高德地图Amap2.0注销清除不掉内存的解决方法

高德地图Amap2.0注销清除不掉内存的解决方法相关推荐

最新文章

热门文章