¿Extender el marcador Google Maps para animar sin problemas en la actualización?

Question

Uso de Google Maps API v3 He podido actualizar varias posiciones de marcadores a través de una llamada AJAX. Sin embargo, carece de cualquier transición. Código de abajo:

if (!latlong.equals(point.latlong)) { 
    point.latlong = latlong; 
    point.marker.setPosition(latlong); 
} 

El inconveniente es que no tiene un método animación nativo. ¿Alguien sabe algún método para extender para que el marcador pueda "moverse" con fluidez desde su posición anterior a la nueva? O cualquier método disponible? No he podido encontrar ninguna documentación. ¡Gracias!

Answer 1

No encontré ninguna manera nativa para crear esta animación. Puede crear su propia animación haciendo un paso desde el punto actual al punto final usando setPosition. Aquí es un fragmento de código para darle una idea:

var map = undefined; 
var marker = undefined; 
var position = [43, -89]; 

function initialize() { 

    var latlng = new google.maps.LatLng(position[0], position[1]); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title: "Your current location!" 
    }); 

    google.maps.event.addListener(map, 'click', function(me) { 
     var result = [me.latLng.lat(), me.latLng.lng()]; 
     transition(result); 
    }); 
} 

var numDeltas = 100; 
var delay = 10; //milliseconds 
var i = 0; 
var deltaLat; 
var deltaLng; 
function transition(result){ 
    i = 0; 
    deltaLat = (result[0] - position[0])/numDeltas; 
    deltaLng = (result[1] - position[1])/numDeltas; 
    moveMarker(); 
} 

function moveMarker(){ 
    position[0] += deltaLat; 
    position[1] += deltaLng; 
    var latlng = new google.maps.LatLng(position[0], position[1]); 
    marker.setPosition(latlng); 
    if(i!=numDeltas){ 
     i++; 
     setTimeout(moveMarker, delay); 
    } 
} 

Esto probablemente se puede limpiar un poco, pero le dará un buen comienzo. Estoy usando el método setTimeout de JavaScript para crear la animación. La llamada inicial a 'transición' hace que comience la animación. El parámetro para 'transición' es una matriz de dos elementos [lat, lng]. La función 'transición' calcula los tamaños de paso para lat y lng en función de un par de parámetros de animación (numDeltas, retraso). Luego llama a 'moveMarker'. La función 'moveMarker' mantiene un contador simple para indicar cuándo el marcador ha llegado al destino final. Si no está allí, se llama de nuevo.

Aquí es una jsFiddle del trabajo código: http://jsfiddle.net/rcravens/RFHKd/13/

Espero que esto ayude.

Bob

Answer 2

En caso de que quiera animaciones de alta calidad (con alivio), por debajo de la biblioteca debería ayudar:

https://github.com/terikon/marker-animate-unobtrusive

http://terikon.github.io/marker-animate-unobtrusive/demo/unobtrusive/markermove-sliding.html