谷歌地图标记去除的逆向动画？

我知道我可以在谷歌地图上添加一个标记的“添加”动画，有没有反正我可以做从地图上移除标记的反向动画？我希望它可以飞回到地图顶部的标记删除...可能吗？谷歌地图标记去除的逆向动画？

这里是我的删除代码到目前为止（只是从地图上看，没有动画中删除）：

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

谷歌地图标记去除的逆向动画？

回答

相关问题