用于删除谷歌地图标记的反向动画

Reverse animation for Google Map marker removal?

本文关键字：动画 图标 删除 谷歌 地图 用于      更新时间：2023-09-26

我知道我可以在谷歌地图上对标记的"添加"进行动画处理，就像 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不支持拖放的反向动画，因此您需要编写自己的脚本来对标记进行动画处理。

你可以写这样的东西：

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);
        }
    })();
}

这是演示：

我的想法：

  1. 创建一个飞行标记别针的动画 GIF，然后消失。
  2. 在标记删除事件上，交换icon以显示 GIF
  3. 由于您创建了 GIF，因此您应该知道动画时间长度。然后，使用此值设置超时以调用 setMap（null）

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

相关文章：