谷歌地圖標記去除的逆向動畫？

我知道我可以在谷歌地圖上添加一個標記的「添加」動畫，有沒有反正我可以做從地圖上移除標記的反向動畫？我希望它可以飛回到地圖頂部的標記刪除...可能嗎？谷歌地圖標記去除的逆向動畫？

這裏是我的刪除代碼到目前爲止（只是從地圖上看，沒有動畫中刪除）：

// TODO figure out if there is a way to animate this removal, like the add 
$.contextualMap.prototype.removeMarker = function(m) { 
    m.mapMarker.setMap(null); 
    m.mapMarker = null; 
};

來源

2012-04-16 neezer

似乎並不能夠通過標準的[爲google.maps.Animation（https://developers.google。 com/maps/documentation/javascript/reference＃Animation）類，因爲只有2個支持的動畫（BOUNCE和DROP）。您將有可能使用普通的javascript製作您自己的動畫並在地圖上移動標記....不要忘記關閉陰影或專門處理它... – TMS 2012-04-16 17:39:47

由於google.maps.Animation不支持droping的反轉動畫，因此您需要編寫自己的腳本來爲標記設置動畫。

你可以寫這樣的事情：

function removeMarkerWithAnimation(map, marker){ 
    (function animationStep(){ 
     //Converting GPS to World Coordinates 
     var newPosition = map.getProjection().fromLatLngToPoint(marker.getPosition()); 

     //Moving 10px to up 
     newPosition.y -= 10/(1 << map.getZoom()); 

     //Converting World Coordinates to GPS 
     newPosition = map.getProjection().fromPointToLatLng(newPosition); 
     //updating maker's position 
     marker.setPosition(newPosition); 
     //Checking whether marker is out of bounds 
     if(map.getBounds().getNorthEast().lat() < newPosition.lat()){ 
      marker.setMap(null); 
     }else{ 
      //Repeating animation step 
      setTimeout(animationStep,10); 
     } 
    })(); 
}

這裏是DEMO:

來源

2012-04-16 18:17:04 Engineer

謝謝！這絕對是一個很好的起點，正是我期待的事情。 – neezer 2012-04-16 18:23:21

@neezer出於演示目的，我已經使用'線性'緩動，但對於更真實的動畫，可能需要使用另一個緩動功能來更改'newPosition.y'參數。 – Engineer 2012-04-16 18:29:29

我的想法：

創建一個飛行的標記圖釘，然後的GIF動畫淡去。
標記刪除事件，交換icon以顯示GIF
由於您創建了GIF，您應該知道動畫的時間長度。然後，setTimeout用此值調用setMap（null）

它可能會阻止事件傳播，這是許多可能的缺點之一。

來源

2012-04-16 17:41:16

谷歌地圖標記去除的逆向動畫？

回答

相關問題