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

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

具有滞后

 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-26 arjuncc

你可以使用jsfiddle在工作演示中显示的问题？ – Cdeez

好吧，我现在将它发布 – arjuncc

我不能发布它在jsfiddle，但我可以提供一个链接 http://export.idreamzsolutions.net/brewhousecafe/ – arjuncc

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

你可以尝试删除鼠标悬停事件，并重新添加鼠标移开时：

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-26 10:30:36 Grsmto

谢谢，但它不工作。我们有鼠标中键/ mouseleve用于标记？ https://developers.google.com/maps/documentation/javascript/events – arjuncc

对不起，我用一个真正的解决方案编辑我的答案。 – Grsmto

谢谢，但它仍然在谷歌浏览器失败（版本23.0.1271.64） – arjuncc

我用下面的代码来避免闪烁到一个扩展，但是它有一些闪烁。请让我知道，如果这个代码可以再次提高

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-28 10:20:01 arjuncc

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

回答

相关问题