1

我用谷歌地图、动画标记做了一个网站的一部分。我使用大小为 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

I used the following code to avoid the flicker in to an extend, But sill it got some flickering. Please let me know, if this code can be improved again 

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

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

您可以尝试删除 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 并没有告诉任何关于动画事件的信息，比如“完成”等。所以它会很复杂而且很难完成。

于 2012-11-26T10:30:36.033 回答