javascript - Reverse animation for Google Map marker removal? - Stack Overflow

admin管理员组

文章数量:1345726

I know I can animate the "adding" of a marker on a google map, a la

Is there anyway I can do the reverse animation for removing the marker from the map? I'd like it to fly back up to the top of the map on marker removal... is that possible?

Here's my remove code so far (just removes it from the map, no animation):

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

I know I can animate the "adding" of a marker on a google map, a la https://developers.google./maps/documentation/javascript/overlays#MarkerAnimations

Is there anyway I can do the reverse animation for removing the marker from the map? I'd like it to fly back up to the top of the map on marker removal... is that possible?

Here's my remove code so far (just removes it from the map, no animation):

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

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers

Share Improve this question Follow edited Apr 16, 2012 at 18:37 Engineer 48.8k1212 gold badges9090 silver badges9292 bronze badges asked Apr 16, 2012 at 17:29 neezerneezer 20.6k3333 gold badges129129 silver badges222222 bronze badges 1

• Doesn't seem to be possible via the standard google.maps.Animation class, as there are only 2 supported animations (BOUNCE and DROP). You will probabl have to make your own animation using normal javascript and moving the marker on the map.... Don't forget to switch off the shadow or handle it specially... – Tomas Commented Apr 16, 2012 at 17:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 13

As google.maps.Animation does not support reverse animation of droping, you need to write your own script for animating the marker.

You could write something like this:

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

Here is DEMO:

My idea:

1. create an animated GIF of a flying marker pin, which then fades away.
2. on the marker delete event, swap icon to show the GIF
3. Since you created the GIF, you should know the animation time length. Then, setTimeout with this value to call setMap(null)

It might be preventing event propagation, which is one of many possible drawbacks.

本文标签： javascriptReverse animation for Google Map marker removalStack Overflow