高德地图渲染多个点（文字，marker等等）卡顿优化指南

前言

说实话，做项目挺难的，尤其是一个人做项目，遇到问题只能网上各种搜索，查找资料等等。重点是有时候一些冷门的东西（尤其是可视化相关），网上有用的资料非常的少。当我第一次遇到这个需求，需要一次性渲染上千个自定义marker（自带样式的icon）时，发现高德地图网页端性能很差，一卡一卡的，非常影响用户体验。

问题分析

首先需要了解卡顿的具体原因，高德地图渲染卡顿最常见的原因有以下几点：

1. 渲染的点位过多，超过高德地图自身性能的瓶颈。
2. 自定义icon的尺寸过大。
3. 自定义icon加载资源太多。

解决方案

针对上述问题，可以采用以下解决方案：

1. 减少渲染的点位数量。如果实在不行，建议使用高德的聚合marker来代替，并且开启网格聚合。
2. 缩小自定义icon的尺寸。高德地图强烈建议将icon的尺寸控制在60px*60px以内。
3. 减少自定义icon加载资源的数量。这一点其实很容易理解，因为加载的资源越多，加载时间越长，在地图上展现也就越慢。

优化方案

结合以上问题和解决方案，可以给出以下优化方案：

1. 对于点的数量过多导致的卡顿，采用高德地图聚合点进行优化。
2. 对于自定义icon的尺寸过大导致的卡顿，采用缩小尺寸、采用雪碧图等方案进行优化。
3. 对于自定义icon加载资源过多导致的卡顿，采用雪碧图等方案进行优化。

优化效果

经过上述优化后，高德地图渲染卡顿的情况得到了极大的改善。以下是优化的效果图：

优化前：

优化后：

总结

通过本文，我们了解了高德地图渲染卡顿的原因以及相应的优化方案。希望对大家有所帮助。

参考资料

1. 高德地图官方文档
2. 高德地图聚合点
3. 高德地图雪碧图