谷歌地圖標記動畫中的閃爍

我已經完成了谷歌地圖，動畫標記網站的一部分。我正在使用尺寸爲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

谷歌地圖標記動畫中的閃爍

回答

相關問題