Google地图标记动画中的闪烁

Question

我已经用Google地图，动画标记完成了网站的一部分。我正在使用尺寸为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);
        }

Answer 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);
                        }

Answer 2

[只要您停留在市场上，mouseover事件就可能被调用两次（因此动画被调用了很多次，导致闪烁）。

您可以尝试删除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);
});

EDIT：不起作用。因为动画使鼠标退出事件（通过移动标记，您的鼠标尚未在其上...）。而且gmaps API不会告诉任何有关动画事件的信息，例如“ complete”等。因此，它会很复杂并且很难完成。