7

マーカーにマウスオーバーしたときにバウンス効果を持たせ、マウスを離したときにアニメーションを停止したいと思います。

次のように、リスナーで mouseover および mouseout イベントを使用しようとしています。

google.maps.event.addListener(marker, 'mouseover', function() {
  this.setAnimation(google.maps.Animation.BOUNCE);
});

google.maps.event.addListener(marker, 'mouseout', function() {
  this.setAnimation(null);
});

しかし、これは奇妙に見えます。間違った動作を言葉で説明することはできません。私が記録したこの 15 秒間のビデオをご覧ください。

===> http://youtu.be/Hcy8823nNQU

私が必要としているのは、おそらくマウスアウトではなくマウスリーブですが、そのイベントは API によって提供されていません。

4

1 に答える 1

13

重要なのは、次のように、まだ設定されていない場合にのみアニメーションを設定することです。

google.maps.event.addListener(marker, 'mouseover', function() {
    if (this.getAnimation() == null || typeof this.getAnimation() === 'undefined') {

        /* 
        Because of the google maps bug of moving cursor several times over and out of marker
        causes bounce animation to break - we use small timer before triggering the bounce animation
        */

        clearTimeout(bounceTimer);

        var that = this;

        bounceTimer = setTimeout(function(){
             that.setAnimation(google.maps.Animation.BOUNCE);
        },
        500);

    }
});

google.maps.event.addListener(marker, 'mouseout', function() {

     if (this.getAnimation() != null) {
        this.setAnimation(null);
     }

     // If we already left marker, no need to bounce when timer is ready
     clearTimeout(bounceTimer);

});

私はあなたのためにJSフィドルを作成しました。

編集:

マーカーを as として使用すると機能が損なわれるようです。そのdraggable: falseため、アニメーションを引き続き機能させたい場合は、 も追加する必要がありますoptimized: false。これらを含めるように私のフィドルを更新しました。また、マーカー アニメーションの切り替えが速すぎるとバグが発生することもわかりました。バウンス アニメーションを開始する前に示す小さなタイマーを追加したことで、問題が解決したようです。

于 2013-05-05T13:26:10.150 に答える