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

最新推荐文章于 2025-06-16 14:34:50 发布

Jartto

最新推荐文章于 2025-06-16 14:34:50 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Jartto/article/details/106681517

本文探讨了在使用高德地图（AMap）时遇到的Marker动画性能问题，通过分析和实验，揭示了原生动画对性能的影响。作者通过重写动画、优化DOM和调整图层，显著提高了帧率和减少了CPU占用，从而实现了更流畅的地图体验。文章还提供了相关工具的使用技巧和优化建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、更新Marker

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

$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); 
    }
  });
};