javascript - 谷歌地图标记删除的反向动画？

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

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

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

到目前为止，这是我的删除代码(只是将其从 map 中删除，没有动画):

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

这里是 DEMO:

关于javascript - 谷歌地图标记删除的反向动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10178789/