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

이 일반적인 실수이다

여기 내 코드입니다. 루프가 클릭 이벤트를 각 마커에 바인딩한다고 생각할 수도 있지만 실제로는 그렇지 않습니다. 클릭 이벤트는 마커를 만든 후에 발생하기 때문에 마지막 마커에서만 작동합니다. 함수에 필요한 매개 변수를 전달하고 거기에 마커를 만들어야합니다.

여기서 BTW 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>