5

Sé que puedo animar la "Adición" de un marcador en un mapa de Google, a la https://developers.google.com/maps/documentation/javascript/overlays#MarkerAnimationsAnimación inversa para la eliminación del marcador Google Map?

¿Hay alguna forma de hacer la animación inversa para eliminar el marcador del mapa? Me gustaría que volviera a la parte superior del mapa en la eliminación del marcador ... ¿es posible?

Aquí está mi código de eliminación hasta el momento (tan sólo lo quita del mapa, sin animación):

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

no parece ser posible a través del estándar [google.maps.Animation] (https://developers.google. com/maps/documentation/javascript/reference # Animation), ya que solo hay 2 animaciones compatibles (BOUNCE y DROP). Probablemente tengas que hacer tu propia animación usando JavaScript normal y moviendo el marcador en el mapa ... No olvides apagar la sombra o manejarla especialmente ... – TMS

Respuesta

11

Como google.maps.Animation no es compatible con la animación inversa de droping, debe escribir su propia secuencia de comandos para animar el marcador.

Se puede escribir algo como esto:

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

Aquí es DEMO:

+0

¡Gracias! Este es definitivamente un buen punto de partida, y exactamente el tipo de cosa que estaba buscando. – neezer

+0

@neezer Para fines de demostración, he usado el suavizado "lineal", pero para una animación más realista, probablemente necesite cambiar el parámetro 'newPosition.y' utilizando otra función de suavizado. – Engineer

0

Mi idea:

  1. crear un GIF animado de un alfiler marcador de vuelo, que a su vez se desvanece.
  2. en el marcador borrar evento, intercambiar icon para mostrar el GIF
  3. Desde que creó el GIF, debe conocer la duración del tiempo de animación. Entonces, setTimeout con este valor para llamar a setMap (nulo)

Podría estar impidiendo la propagación de eventos, que es uno de los muchos inconvenientes posibles.

Cuestiones relacionadas