Question

我正在使用ng-map。我想要像BOUNCE动画这样的标记。但我有多个标记＆amp;当我第一次点击第二个标记时仍然是BOUNCING。

如何停止除一个（我点击）之外的每个标记动画？

感谢您的关注。

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>

如何从ng-map标记中清除动画

1 个答案: