谷歌地图标记删除的反向动画？答案

【问题标题】：Reverse animation for Google Map marker removal?谷歌地图标记删除的反向动画？
【发布时间】：2012-04-28 01:23:52
【问题描述】：

我知道我可以在谷歌地图上“添加”标记的动画，例如https://developers.google.com/maps/documentation/javascript/overlays#MarkerAnimations

无论如何我可以做反向动画来从地图上删除标记吗？我希望它在移除标记时飞回地图顶部……这可能吗？

这是我目前的移除代码（只是从地图中移除，没有动画）：

// 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;
};

【问题讨论】：

似乎无法通过标准 google.maps.Animation 类实现，因为仅支持 2 个动画（BOUNCE 和 DROP）。您可能必须使用普通 javascript 制作自己的动画并在地图上移动标记......不要忘记关闭阴影或特别处理它......

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

由于google.maps.Animation 不支持掉落的反向动画，您需要编写自己的脚本来为标记设置动画。

你可以这样写：

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:

【讨论】：

谢谢！这绝对是一个很好的起点，正是我一直在寻找的东西。
@neezer 出于演示目的，我使用了“线性”缓动，但为了更逼真的动画，可能需要使用另一个缓动函数更改newPosition.y 参数。
你能更新你的小提琴链接吗？谢谢。

【解决方案2】：

我的想法：

创建一个飞行记号笔的 GIF 动画，然后消失。
在标记删除事件中，交换 icon 以显示 GIF
既然您创建了 GIF，您应该知道动画的时间长度。然后，用这个值 setTimeout 调用 setMap(null)

它可能会阻止事件传播，这是许多可能的缺点之一。

【讨论】：