Googleマップのバウンスマーカーをアニメーション化する

Question

私のマーカーにバウンスアニメーションを実装しようとしていますが、私はこのドキュメントと私の配列内の最初のマーカーのアニメートのみを行っています。私はイベントリスナーに私のマーカー上の場所を呼び出すことを試みたが、それは動作しないようだ。助言がありますか？

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

これはよくある間違いです：

は、ここに私のコードです。ループはクリックイベントを各マーカーに結びつけますが、実際はそうではありません。クリックイベントはマーカーの作成後に発生するため、最後のマーカーに対してのみ機能します。関数に必要なパラメータを渡してそこにマーカーを作成する必要があります。

ここでは、locationarrayは単なる配列ではありません。

の作業フィドル：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>