ng-mapマーカーからアニメーションをクリアする方法

Question

私はng-mapを使用しています。この例のようにBOUNCEアニメーションのマーカーが必要です。しかし、私は複数のマーカー&を持っています。

私はどのマーカーアニメーションを止めることができますか？

ありがとうございました。

Answer 1

次の変形例は、一度に選択されたマーカーをアニメーション化する方法を示しています。

angular.module('myApp', ['ngMap']) 
 
    .controller('MarkerAnimationCtrl', function (NgMap) { 
 
     var vm = this; 
 

 
     NgMap.getMap().then(function (map) { 
 
      vm.map = map; 
 
     }); 
 
     vm.cities = [ 
 
      { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] }, 
 
      { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] }, 
 
      { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] }, 
 
      { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] }, 
 
      { id: 5, name: 'Paris', pos: [48.856127, 2.346525] } 
 
     ]; 
 

 
     vm.toggleBounce = function() { 
 
      for (var key in vm.map.markers) { 
 
       var mid = parseInt(key); 
 
       var m = vm.map.markers[key]; 
 
       if (mid != this.id) { 
 
        if (m.getAnimation() != null) { 
 
         m.setAnimation(null); 
 
        } 
 
       } 
 
       else { 
 
        m.setAnimation(google.maps.Animation.BOUNCE); 
 
       } 
 
      } 
 

 
     } 
 
    });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 

 

 
    <div ng-app="myApp" ng-controller="MarkerAnimationCtrl as vm"> 
 
     <ng-map zoom="4" center="59.339025, 18.065818"> 
 
      
 
      <marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="vm.toggleBounce()" animation="DROP" 
 
       draggable="true"> 
 
      </marker> 
 

 
     </ng-map> 
 
    </div>