Javascript 突出显示传单中的自定义图标

我在传单中使用带有自定义图像的标记，如下所示：

// A template for icons when they get instantiated on the map
var UnitIcon = L.Icon.extend({
options: {
    iconSize:     [40, 40],
    iconAnchor:   [20, 35]
  }
});

function PlaceIconOnMapAtLatLng(iconURL, lat, lng)
{
  var newIcon = new UnitIcon({iconUrl: iconURL});
  var myMarker = L.marker([lat, lng], {icon: newIcon, draggable: true}).addTo(map);
}

自定义图像位于文件夹中，并在运行时读取。其想法是用户可以更改这些，并拥有他们想要的数量

我的问题是，当涉及到突出显示这些内容时，例如单击，在传单中似乎没有任何直接的方法来做到这一点。起初，我想在图标周围画一个形状，但随后这将被视为它自己的单独的东西，将被单独拖动，而我希望它始终保持与其关联的图标在一起

一个可怕的第一次尝试就像是不断运行更新，将高亮显示的位置设置为所选标记的位置

或者是否有某种方式将对象关联起来，例如作为“子对象”，以便当其父对象移动时，子对象也随之移动

---

我更喜欢显式高亮显示，而不是更改选定标记的大小或不透明度，或者给它一个弹出窗口，尽管这些可能是后备选项。我想要高亮显示的原因是，最终我希望能够一次高亮显示多个图标，并且拥有大量的弹出窗口等，这似乎不是一个很好的方法。

您可以向图标添加CSS类

marker.on('click', function (e){
   var layer = e.target;
   if(!L.DomUtil.hasClass(layer._icon, 'dash-border')){
        L.DomUtil.addClass(layer._icon,'dash-border');
   }else{
        L.DomUtil.removeClass(layer._icon,'dash-border');
   }
});

.dash-border {
    border: 2px dashed #3388ff;
    background-color: #3388ff4d;
}