JS de Google Maps API v3 Animer Marqueur Entre les Coordonnées

Vous pouvez utiliser le marqueur d'animation discrète de la bibliothèque pour faire des marqueurs
transition d'un lieu à un autre.

Vous pourriez initialiser votre marqueur comme ça:

var marker = new SlidingMarker({
   //your original marker options
   //...
   duration: 1000
});

Avec cette définition, le marqueur se fera en douceur déplacer vers une nouvelle position dans un délai de 1 seconde, il suffit d'appeler le marqueur.setPosition().

Si vous souhaitez animer un marqueur de va-et-vient, tout bascule setPosition chaque seconde.

setTimeout(function() {
   var newPosition = /* select new position */
   marker.setPosition(newPosition)
}, 1000);

P. S. je suis l'auteur de la bibliothèque.

OriginalL'auteur viskin

Une alternative est d'utiliser les transitions CSS. L'important est d'identifier les DIVs, Google Maps est l'aide de votre marqueur (Il y a 2 l'un est transparent pour les événements tactiles) L'enquête a été fait pour vous et vous n'avez qu'à le comprendre une fois.

Un exemple complet peut être trouvé ici Voir comment en douceur Hansel et Gretel se déplacer autour de la carte! Et les délais de transition fusionnent si il n'y a aucun retard.

Tout le code de mon Brotkrumen Ultime Application Web peut être trouvé ici vous sera surtout intéressé par l'HandleMap.js fichier mais il y a un aaa_readme.txt

Voici une partie du code: -

function showJourney(){
map.setZoom(map.getZoom());
map.setOptions({gestureHandling: "none"});
zoomOut.style.display = "none";
zoomIn.style.display  = "none";
hat.setPosition(
new google.maps.LatLng(
lastPos.coords.latitude,
lastPos.coords.longitude)); 
hat.setVisible(true);
hat.setAnimation(bounce);
HandG.setPosition(
new google.maps.LatLng(
firstPos.coords.latitude,
firstPos.coords.longitude)); 
HandG.setVisible(true);
map.panTo(path[0]); 
google.maps.event.trigger(map, 'resize');
if (document.querySelectorAll(MARKER_SELECTOR).length == 0){
observer.observe(mapDiv, {
childList     : true,
subtree       : true ,
attributes    : true ,
characterData : false
})
} else {
setTimeout(plotTrip,0);
}
}
function plotTrip(){
nextFunc = plotStep;
hat.setAnimation(bounce);
HandG.setPosition(path[0]);
dirPoly.setVisible(true);       
progressPath = [];
progressPath.push(path[0]);
dirPoly.setPath(path);
stepPoly.setPath(progressPath);
stepPoly.setVisible(true);
currStep = 1;
markerDivs = [];
var markerImgs = document.querySelectorAll(MARKER_SELECTOR);
for (var i=0; i<markerImgs.length; i++){
console.log(markerImgs[i].src);
markerDivs[i] = markerImgs[i].parentNode;
markerDivs[i].style.transitionDuration = "0s";
markerDivs[i].style.transitionProperty = "left, top";
markerDivs[i].style.transitionTimingFunction = "linear";
}
setTimeout(plotStep,0);
abort = false;
btn.value = "Cancel";
btn.disabled = false;
}
function plotStep(){
if (abort) return;
if (legs[currStep].didLoiter){
countDown = legs[currStep].restTime;
infoWindow.setContent(
"<div id='waitDiv'><span>Waiting</span></div>");
infoWindow.open(map,HandG);
showInterval();
} else {
plotIt();
}
}
function showInterval(){
if (abort) return;
infoWindow.setContent(
"<div id='waitDiv'><span>Waiting "+deltaDate(countDown)+"</span></div>");
countDown -= (ONE_SEC * multiSpeed);
if (countDown < 1){
infoWindow.close(); 
plotIt();
} else {
setTimeout(showInterval, ONE_SEC);
}
}
function plotIt(){
if (abort) return;
progressPath.push(path[currStep]);
stepPoly.setPath(progressPath);
map.panTo(path[currStep]);
var transitionMS = legs[currStep].duration / multiSpeed;
for (var i=0; i<markerDivs.length; i++){
markerDivs[i].style.transitionDuration = transitionMS + "ms";
}
HandG.setPosition(path[currStep])
if (++currStep >= path.length)
nextFunc = cleanUp;
plotTimer = setTimeout(nextFunc,transitionMS);
}
function cleanUp(){
infoWindow.close();
hat.setAnimation();
btn.value = "Replay";
btn.disabled = false;
clearTimeout(plotTimer);
for (var i=0; i<markerDivs.length; i++){
markerDivs[i].style.transitionDuration = "0s";
}
HandG.setPosition(
new google.maps.LatLng(
lastPos.coords.latitude,
lastPos.coords.longitude)); 
HandG.setVisible(false);
map.setOptions({gestureHandling: "cooperative"});
zoomIn.style.display  = "";
zoomOut.style.display = "";
if (canTalk && !abort)
speechSynthesis.speak(finish);
}
function waitForMarker(mutations, myInstance) {
outer:
for (var i=0; i<mutations.length; i++){
if (mutations[i].type           == "attributes" && 
mutations[i].target.tagName == "IMG"        &&
mutations[i].target.src.toLowerCase().indexOf(MARKER_SRC) != -1){
console.log("result")
myInstance.disconnect();
setTimeout(plotTrip,0)
break outer;
}
if (mutations[i].type != "childList" ||
mutations[i].addedNodes.length   == 0) 
continue;
for (var j=0; j<mutations[i].addedNodes.length; j++) {
var node = mutations[i].addedNodes[j];
if (node.tagName == "DIV" && node.firstChild && node.firstChild.tagName == "IMG" &&
node.firstChild.src.toLowerCase().indexOf(MARKER_SRC) != -1){
console.log(node.firstChild.src);
myInstance.disconnect();
setTimeout(plotTrip,0)
break outer;
}
}
}
} 

OriginalL'auteur McMurphy