Как заставить маркер Google Maps снова отскочить в JavaScript

Question

Я хочу, чтобы маркер Google Maps продолжал подпрыгивать. Когда его тянут, я хочу, чтобы он прекратил подпрыгивать. Когда он перестал перетаскиваться, я хочу, чтобы он снова начал подпрыгивать.

Вот код:

    var marker = new google.maps.Marker({
        position: { lat: 0, lng: 0 },
        map: map,
        draggable: true,
        animation: google.maps.Animation.BOUNCE
    });

    marker.addListener('dragend', function () {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    });

    marker.addListener('dragstart', function () {
        marker.setAnimation(null);
    });

Проблема в том, что, когда я перестаю перетаскивать маркер, он отскакивает анимация один раз (примерно на секунду), а затем маркер не продолжает подпрыгивать вверх и вниз, как это было до перетаскивания.

У меня та же проблема с другой функцией, когда я нажимаю на маркер и затем нажмите на него еще раз (после второго щелчка он подпрыгивает и не продолжает подпрыгивать).

Он делает только один отскок и останавливается, но я хочу, чтобы он продолжал подпрыгивать вверх и вниз на dragend (как это происходит перед перетаскиванием), вместо того, чтобы сделать один скачок и остановить его.

Есть идеи, почему он не продолжает анимацию и как ее исправить?

Answer 1

Похоже, ошибка в API. Возможно, стоит открыть проблему в системе отслеживания проблем , указывая на этот вопрос.

Чтобы обойти эту проблему, используйте setTimeout, чтобы снова запустить анимацию:

marker.addListener('dragend', function() {
  marker.setAnimation(google.maps.Animation.BOUNCE);
  setTimeout(function() {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }, 1000);
});

• Кажется, что есть некоторый период времени, когда предыдущая анимация активна, но заканчивается, когда она будет отскакивать только один раз.

• animation_changed Похоже, событие тоже не помогает (похоже, что оно не срабатывает, когда предыдущая анимация останавливается).

доказательство концепции скрипки

фрагмент кода:

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.BOUNCE,
    position: {
      lat: 59.327,
      lng: 18.067
    }
  });
  marker.addListener('dragend', function() {
    marker.setAnimation(google.maps.Animation.BOUNCE);
    setTimeout(function() {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }, 1000);
  });

  marker.addListener('dragstart', function() {
    marker.setAnimation(null);
  });

  marker.addListener('animation_changed', function() {
    console.log(marker.getAnimation());
  })
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>