如何在Google Map上逐个实现标记掉落动画

Got it, the issue with your current code is that all markers are created in quick succession, so their DROP animations start at the exact same time. To make them fall one after another, we need to stagger the creation of each marker using a timed delay based on its index in the data array.

Here's the modified code that achieves this:

$.ajax({
  type: 'get',
  url: APP_URL + '/yestoday',
  data: {_token:"{{csrf_token()}}"},
  success: function (data) {
    var locations = Array();
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(20.593683,78.962883),
      zoom: 7,
    });

    // Loop through data and stagger marker creation
    jQuery.each(data, function(index, value){
      // Calculate delay: 300ms per marker (adjust this value to speed up/slow down)
      var delay = index * 300;

      setTimeout(function() {
        // Create marker point
        var point = new google.maps.LatLng(parseFloat(value.latitude), parseFloat(value.longitude));
        
        // Build points array if you still need the locations collection
        var points = [
          parseFloat(value.latitude),
          parseFloat(value.longitude),
          value.store_name,
          value.store_address
        ];
        locations.push(points);

        // Create marker with drop animation
        var marker = new google.maps.Marker({
          position: point,
          map: map,
          animation: google.maps.Animation.DROP,
        });

        // Add info window listeners
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'mouseover', function() {
          infowindow.setContent('<div><strong>' + value.store_name + '</strong><br><strong>' + value.store_address + '</strong></div>');
          infowindow.open(map, this);
        });
        google.maps.event.addListener(marker, 'mouseout', function() {
          infowindow.close();
        });

      }, delay);
    });
  },
});

Key Changes Explained: #

• setTimeout with index-based delay: Each marker is created after a delay equal to index * 300 milliseconds. This means the first marker drops immediately, the second after 300ms, third after 600ms, etc. Adjust the 300 value to make the animation faster (smaller number) or slower (larger number).
• Encapsulated marker creation: All marker-related code is moved inside the setTimeout callback, ensuring each marker is initialized at the right time.
• Cleaned up points array: Replaced multiple push calls with a single array literal for readability (functionally the same as your original code).

This will give you the sequential drop animation you're looking for!

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