Question

我用谷歌地图，动画标记完成了网站的一部分。我使用大小为160X243px的自定义图像作为标记图标。我将反弹动画放在mouseover事件中，然后删除mouseout上的动画。问题是我在动画开始时得到了一些混蛋，它就像在开始时变得模糊。有没有办法避免这种情况。我设置了一个延迟来解决这个问题，但它没有多大用处。以下是我用于动画的代码。

WITH OUT DELAY

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

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

WITH DELAY

        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

鼠标悬停事件可能被调用两次，只要你留在市场上（因此动画被多次调用，导致闪烁）。

您可以尝试删除鼠标悬停事件并在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并没有说明任何有关动画事件的信息，例如＆＃39;完成＆＃39;等等。这样做很复杂，也很棘手。

在谷歌地图标记动画中闪烁

2 个答案: