Animieren von google map springenden Markern

Question

Im Versuch, die Bounce-Animation auf meine Marker zu implementieren, folgte ich der Dokumentation dafür und animierte nur den ersten Marker in meinem Array. Ich habe versucht, die Positionen auf meinen Markern in den Event-Listener aufzurufen, aber das scheint nicht zu funktionieren. Irgendwelche Vorschläge?

hier ist mein Code:

for(var i = 0; i < locationArray().length; i++){ 
    var locations = locationArray()[i].location; 
    var title = locationArray()[i].title; 

    var marker = new google.maps.Marker({ 
     position: locations, 
     map: map, 
     title: title, 
     icon: defaultMarker, 
     animation: google.maps.Animation.DROP 
      }); 

    google.maps.event.addListener(marker,'click', function(){ 
     if (marker.getAnimation() !== null) { 
      marker.setAnimation(null); 
     } else { 
      marker.setAnimation(google.maps.Animation.BOUNCE); 
      } 
      console.log(marker); 

}); 

Answer 1

Dies ist ein häufiger Fehler. Sie denken vielleicht, dass Loop ein Klickereignis an jeden Marker bindet, aber eigentlich nicht. Da das Klick-Ereignis erst nach der Erstellung von Markern auftritt, funktioniert es nur für das letzte. Sie müssen die notwendigen Parameter an eine Funktion übergeben und dort die Marker anlegen.

BTW locationarray hier ist keine Funktion nur ein Array.

Arbeits Geige: https://jsfiddle.net/ergec/8kdx7az6/

var map; 
 
    google.maps.event.addDomListener(window, "load", function() { 
 
     var map = new google.maps.Map(document.getElementById("map_div"), { 
 
      center: new google.maps.LatLng(33.808678, -117.918921), 
 
      zoom: 14, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }); 
 
     function createMarker(locationArray) { 
 
      var locations = locationArray.location; 
 
      var title = locationArray.title; 
 
      var marker = new google.maps.Marker({ 
 
       position: locations, 
 
       map: map, 
 
       title: title, 
 
       animation: google.maps.Animation.DROP 
 
      }); 
 
    
 
      google.maps.event.addListener(marker, 'click', function() { 
 
       if (marker.getAnimation() !== null) { 
 
        marker.setAnimation(null); 
 
       } else { 
 
        marker.setAnimation(google.maps.Animation.BOUNCE); 
 
       } 
 
      }); 
 
     } 
 
     locationArray = [ 
 
      {location: new google.maps.LatLng(33.808678, -117.918921), title: "1"}, 
 
      {location: new google.maps.LatLng(33.818038, -117.928492), title: "2"}, 
 
      {location: new google.maps.LatLng(33.803333, -117.915278), title: "3"} 
 
     ]; 
 
     for (var i = 0; i < locationArray.length; i++) { 
 
      createMarker(locationArray[i]); 
 
     } 
 
    });

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&v=3"></script> 
 
    
 
    <div id="map_div" style="height: 400px;"></div>