Leaflet地图标记悬停跳跃效果异常：标记移至左上角求助

我用Leaflet创建了地图，添加了自定义图标标记，想实现鼠标悬停时的跳跃效果，但现在鼠标悬停时标记会跑到地图左上角，求排查原因。

现有代码 #

JavaScript

var marker = L.marker([4.81476666666667, -75.6994888888889], { icon: customIcon }).addTo(mymap);

marker.on('mouseover', function (e) {
    marker.getElement().classList.add('marker-icon');
    marker.getElement().style.transform = 'translate(-50%, -100%)'; 
  });
  
  marker.on('mouseout', function (e) {
    marker.getElement().classList.remove('marker-icon');
    marker.getElement().style.transform = ''; 
  });

CSS

.marker-icon {
  position: relative;
  animation: jump 0.5s infinite alternate;

}

@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

状态截图 #

• 正常状态：
  
• 异常状态：
  

问题原因及修复方案 #

问题出在两处：

1. 你手动设置的transform: translate(-50%, -100%)直接覆盖了Leaflet标记内部的定位transform属性，破坏了标记的原始位置计算，导致它跑到左上角。
2. CSS里给.marker-icon加的position: relative干扰了Leaflet标记默认的绝对定位逻辑，改变了元素的定位参考系。

修复步骤：

1. 移除JS中手动设置的transform代码，动画自带的translateY已经能实现跳跃效果
2. 删除CSS里的position: relative

修改后的代码：

JavaScript

var marker = L.marker([4.81476666666667, -75.6994888888889], { icon: customIcon }).addTo(mymap);

marker.on('mouseover', function (e) {
    marker.getElement().classList.add('marker-icon');
  });
  
marker.on('mouseout', function (e) {
    marker.getElement().classList.remove('marker-icon');
});

CSS

.marker-icon {
  animation: jump 0.5s infinite alternate;
}

@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

如果想让跳跃以标记自身中心为基准（默认以左上角为原点），可以调整动画的transform：

@keyframes jump {
  from {
    transform: translateX(-50%) translateY(0);
  }
  to {
    transform: translateX(-50%) translateY(-10px);
  }
}

内容的提问来源于stack exchange，提问作者Exthelion