1

Google マップ、アニメーション マーカーを使用して Web サイトの一部を作成しました。マーカー アイコンとしてサイズ 160X243px のカスタム イメージを使用しています。イベントにバウンス アニメーションを配置し、mouseoverのアニメーションを削除しmouseoutます。問題は、アニメーションの開始時にぎくしゃくしたことです。開始時にぼやけているようです。これを回避する方法はありますか。これを解決するために遅延を設定しましたが、あまり役に立ちません。以下は、アニメーションに使用したコードです。

遅滞なく

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

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

遅延あり

        google.maps.event.addListener(marker, "mouseover", function() {

             setTimeout(function() {
                  addMarkerMethod1();
                },  400);
        });

        google.maps.event.addListener(marker, "mouseout", function() {  
         setTimeout(function() {
      addMarkerMethod2();
    },  100);
    });


        function addMarkerMethod1()
        {
                marker.setAnimation(google.maps.Animation.BOUNCE);
        }

        function addMarkerMethod2()
        {
                marker.setAnimation(null);
        }
4

2 に答える 2

1

次のコードを使用して、ちらつきを大幅に回避しましたが、まだちらつきがありました。このコードを再度改善できる場合はお知らせください 

google.maps.event.addListener(marker, "mouseover", function() { 
                    setTimeout(function() {
                    addMarkerMethod1();
                                           },400);});

google.maps.event.addListener(marker, "mouseout", function() {  
                     setTimeout(function() {
                         addMarkerMethod2();
                                               },  100);});

                        function addMarkerMethod1()
                        {       
                              marker.setAnimation(google.maps.Animation.BOUNCE);                            
                        }
                        function addMarkerMethod2()
                        {
                                marker.setAnimation(null);
                        }
于 2012-11-28T10:20:01.190 に答える
0

おそらく、市場に留まっている限り、マウスオーバー イベントが 2 回呼び出されます (したがって、アニメーションが何度も呼び出され、ちらつきが発生します)。

mouseover イベントを削除して、 mouseout に再度追加することができます:

var overEvent = google.maps.event.addListener(marker, "mouseover", doBounce);

function doBounce() {
    google.maps.event.removeListener(overEvent);
    marker.setAnimation(google.maps.Animation.BOUNCE);
}

google.maps.event.addListener(marker, "mouseout", function() {
    overEvent = google.maps.event.addListener(marker, "mouseover", doBounce);
    marker.setAnimation(null);
});

編集：動作しません。アニメーションがマウス コール アウト イベントを発生させるためです (マーカーを移動すると、マウスはまだその上にありません...)。また、gmaps API は、'complete' などのアニメーション イベントについては何も通知しません。

于 2012-11-26T10:30:36.033 に答える