使标记具有动画效果，单击时大小增加一倍

Question

我试图在单击时使lealet divIcon更改大小。我曾尝试添加CSS，但无法正常工作。

我做了一个基本的小提琴来显示自定义divIcon，但是不确定是向标记添加onclick事件还是在其他位置添加按钮以触发单击。我想对其进行动画处理以使其大小增加一倍，但要保持在正确的位置。谢谢您的任何建议，或者我尝试使用错误方法的地方都很好，谢谢

The fiddle

HTML是：

<div id="map"></div>

CSS是：

body {
  padding: 0;
  margin: 0;
}

html,
body,
#map {
  z-index: 1;
  height: 100vh;
  width: 100vw;
}

/* Counter-productive?
.location-pin {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
}*/

.location-pin img {
  width: 46px;
  height: 46px;
  margin: -26px 0 0 -13px;
  z-index: 10;
  position: absolute;
  border-radius: 50%;
  background: #32383e;
}

.pin {
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0;
  background: #32383e;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -43px 0 0 -30px;
}

.pin:after {
  content: '';
  width: 26px;
  height: 26px;
  margin: 2px 0 0 2px;
  position: absolute;
  border-radius: 50%;
}

.pulse {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 15px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
}

.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -16px 0 0 -13px;
  animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  background: rgba(94, 190, 255, 0.5);
  box-shadow: 0 0 1px 2px #2d99d3;
  animation-delay: 1.1s;
}

JS是：

var zoom = 10;
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
  attribution: osmAttrib,
  detectRetina: true
});

window.map = new L.Map('map', {
  layers: [osm],
  minZoom: 2,
  maxZoom: 18,
  center: [51.505, -0.09],
  zoom: 10,
  zoomControl: false

});

var myIcon = L.divIcon({
  className: 'location-pin',
  html: '<img src="https://www.faces2places.co.uk/img/jules.jpg"><div class="pin"></div><div class="pulse"></div>',
  iconSize: [30, 30],
  //iconAnchor: [18, 30]
  iconAnchor: [10, 33]
});

L.marker([51.5, -0.09], {
  icon: myIcon
}).addTo(map);