如何优化高德地图（AMap）Marker 动画

一般需要接入地图的应用，我们肯定会用到 Marker 即点标记对象。为了使点标记更新时有一些灵性，我尝试添加了掉落动画。然而，事与愿违，遂有此文。

一、更新Marker

我们先来看一下问题代码（因为项目原因，这里使用了 angular，当然你也可以使用 react，vue 以及其它你喜欢的 js 框架）：

1 2 3 4 5 6 7 8 9 10 11 12

$scope.updateMarkers = (data) => { if(!$scope.myMarkers) return; let content = `<span class="marker"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jartto"></use></svg></span>`; $scope.myMarkers.map(item => { if(data.sn === item.G.extData) { item.setAnimation('AMAP_ANIMATION_DROP'); item.setContent(content); } }); };

这里我们实现的是，当有数据推送过来，调用 updateMarkers 方法。

1. 预先写好了 content 字符串；
2. 遍历所有点标记，找到当前点标记；
3. setAnimation 为点标记设置动画；
4. setContent 画点；

完全按照官方教程-自定义点标记操作，看起来并没有什么问题，我们继续。

二、性能被牺牲了，CPU居高不下？

很多用户反应地图页时间久了会变的卡顿，所以问题直接指向了 sockets 不定时更新 Marker 这里，请看下面这张图：

如上述简单的四步更新点位，初步怀疑是 setAnimation 导致，我们来验证一下。

我们试着关闭地图原生动画，注释掉 setAnimation 动画代码，代码如下：

1 2 3 4 5 6 7 8 9 10 11 12

$scope.updateMarkers = (data) => {