如何将2个OpenLayer标记动画添加到页面？Clickevent似乎已被覆盖

<script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.css" />

<div id="map" style="width: 100%; height: 400px;"></div>

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

var marker1 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([10, 10]))
});

var marker2 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([20, 20]))
});

var markerStyle = new ol.style.Style({
  image: new ol.style.Icon({
    src: 'path/to/marker.png',
    scale: 0.5
  })
});

marker1.setStyle(markerStyle);
marker2.setStyle(markerStyle);

var markerLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [marker1, marker2]
  })
});

map.addLayer(markerLayer);

function animateMarker(feature, destination, duration) {
  var start = new Date().getTime();
  var listenerKey;

  function animate(event) {
    var elapsed = event.frameState.time - start;
    var fraction = elapsed / duration;
    if (fraction >= 1) {
      ol.Observable.unByKey(listenerKey);
    }
    var coordinate = ol.coordinate.interpolate(
      feature.getGeometry().getCoordinates(),
      destination,
      ol.easing.easeOut(fraction)
    );
    feature.getGeometry().setCoordinates(coordinate);
  }

  listenerKey = map.on('postcompose', animate);
}

animateMarker(marker1, ol.proj.fromLonLat([20, 20]), 5000);
animateMarker(marker2, ol.proj.fromLonLat([30, 30]), 5000);