前言：高德地图对Marker标记点的性能优化并不好，特别是2.0版本

重要的事情说三遍

！！！切记一切高德地图实例不要使用框架响应式数据
！！！切记一切高德地图实例不要使用框架响应式数据
！！！切记一切高德地图实例不要使用框架响应式数据

高德地图内各种实例的属性众多，如果自动转化为响应式数据，将会增加很多内存开销
 

以vue3为例：

// X 不建议使用ref,reactive

<div class="mapContainer " ref="mapContainer "></div>

const mapContainer = useTemplateRef('mapContainer ')
const map = ref<any>()
const markers= ref<any[]>([])

cont init = ()=>{
    map.value = new AMap.Map(mapContainer.value, {...options})
    markers.value = new AMap.Marker({...options})
}


// √ 使用js原生的非响应式数据代替

let map = null
let markers= []

起初项目使用1.4老版本1000+标记点也能正常使用，但是地图瓦片有点老，想要更新瓦片上的地理信息才更新到2.0，Marker性能骤降，500左右标记点时地图就已经卡起来了，如果对新版本内容不敏感，直接切回1.4版本即可

Marker标记点功能很强大，标记点内容和图片完全可以自定义，方向、渐变色，多内容堆叠等功能都可以实现

解决思路：使用MassMarks海量点替代Marker
MassMarks海量点的缺点：
        一个点仅能渲染一张图片
        且不支持文字标注，如果混用LabelMarker 性能没有纯用MassMarks海量点高，而且要维护两份海量点，且混用两套海量点的话，内部众多标记点不能交叉覆盖（massmarks点1覆盖住labelmarker点1,同时massmarks点2被labelmarker点2覆盖）
        不支持使用渐变色

建议全部使用MassMarks海量点

性能优化思路：本文重点说思路，具体实操可参考高德地图API

        1：将放弃使用Marker Marker标记点拆分出来，拆分成：车辆，车牌号（如果还有别的元素，也拆分开），将一个点拆分成两个个MassMarks，一个MassMark对应一个style，1000+的Marker转化为2000+的MassMark，虽然点的数量翻倍了，但是对于MassMark来说，15000+的数量才勉强超出性能，完全能接受

        2：重复样式或相似样式合并，以上述车辆为例子，车只有360个方向，也就是最多360个style，如果方向精度要求低的话，以45度为梯度再合并，就只有8个style了，具体看业务需求和自身情况

        3：将多张图片合并成为一张，测试过前端使用canvas将两张图片或多张图片重新渲染成一张图片，但是速度并不快，处理过多的话瞬间性能消耗过大，不如让后端去做，再通过请求拿到，两张图片合并为一张这样就能减少一个style，也能处理不能使用渐变色的问题，让后端同事生成一个带有渐变色和车牌号的图片并传给前端，速度比前端用cancas生成要快不少，具体速度和性能开销可以自行探索测试，我的例子比较局限，没有经过太多对比测试

        4：减少图片请求体量，第三步中需要后端频繁处理图片响应给前端，前端可以将几乎不怎么变化的图片保存成静态资源放置与项目或服务器内，避免再次重复请求后端

        我的项目经过上述优化，能支持最少10000+标记点同时展示，并且每个标记点都能实时刷新经纬度以及内容
 

高德覆盖物实例能复用就不销毁重建，实例和事件监听使用完毕后要按照官网或者标准流程进行销毁或取消监听

水平有限，如果有别的思路或者方法，也可以评论区讨论