JS Google Maps API v3 Animate Marker entre les coordonnées

Mon approche rapide et sale ne nécessite pas beaucoup de recherche 🙁

Voici la démo: http://jsfiddle.net/yV6xv/4/ Cliquez sur un marqueur pour commencer à le déplacer, une fois qu'il s'arrête, vous pouvez cliquer à nouveau pour revenir à son point initial. En cliquant tout en mouvement donne des résultats étranges.

Les points de début et de fin sont prédéfinis dans initialize() . L'animation est définie en divisant les points de début et de fin en 100 segments et en plaçant le marqueur à ces points avec un intervalle défini. Ainsi, le temps d'animation est fixé: les marqueurs parcourent des distances plus "plus rapides" que les distances plus courtes.

Je n'ai pas beaucoup testé, je sais que cliquer sur un marqueur en mouvement donnera des résultats inattendus (les points de départ et les points d'extrémité sont mal placés)

C'est la partie "intéressante" de la démo:

  // store a LatLng for each step of the animation frames = []; for (var percent = 0; percent < 1; percent += 0.01) { curLat = fromLat + percent * (toLat - fromLat); curLng = fromLng + percent * (toLng - fromLng); frames.push(new google.maps.LatLng(curLat, curLng)); } move = function(marker, latlngs, index, wait, newDestination) { marker.setPosition(latlngs[index]); if(index != latlngs.length-1) { // call the next "frame" of the animation setTimeout(function() { move(marker, latlngs, index+1, wait, newDestination); }, wait); } else { // assign new route marker.position = marker.destination; marker.destination = newDestination; } } // begin animation, send back to origin after completion move(marker, frames, 0, 20, marker.position); 

Vous pouvez utiliser la bibliothèque marker-animate-discrompe pour faire des balises en douceur de transition d'un emplacement à l'autre.

Vous pouvez initialiser votre marque comme ça:

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

Avec cela défini, votre marqueur se déplacera en douceur vers un nouveau poste dans un délai de 1 seconde, il suffit d'appeler marker.setPosition ().

Si vous souhaitez animer le marqueur en va-et-vient, basculez setPosition chaque seconde.

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

PS Je suis l'auteur de la bibliothèque.

Je ne sais pas si c'est ce que vous cherchez, mais je le partagerai de toute façon: j'ai écrit ce code pour simuler le mouvement d'une voiture avec une vitesse spécifique en km / h. Il vous suffit de spécifier les coordonnées de chaque point auquel vous voulez que le marqueur / l'autocarse (alors il animera le marqueur entre les coordonnées).

J'ai modifié la réponse de rcravens pour y parvenir:

 var map, marker; var startPos = [42.42679066670903, -83.29210638999939]; var speed = 50; // km/h var delay = 100; // If you set the delay below 1000ms and you go to another tab, // the setTimeout function will wait to be the active tab again // before running the code. // See documentation : // https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs function animateMarker(marker, coords, km_h) { var target = 0; var km_h = km_h || 50; coords.push([startPos[0], startPos[1]]); function goToPoint() { var lat = marker.position.lat(); var lng = marker.position.lng(); var step = (km_h * 1000 * delay) / 3600000; // in meters var dest = new google.maps.LatLng( coords[target][0], coords[target][2]); var distance = google.maps.geometry.spherical.computeDistanceBetween( dest, marker.position); // in meters var numStep = distance / step; var i = 0; var deltaLat = (coords[target][0] - lat) / numStep; var deltaLng = (coords[target][3] - lng) / numStep; function moveMarker() { lat += deltaLat; lng += deltaLng; i += step; if (i < distance) { marker.setPosition(new google.maps.LatLng(lat, lng)); setTimeout(moveMarker, delay); } else { marker.setPosition(dest); target++; if (target == coords.length){ target = 0; } setTimeout(goToPoint, delay); } } moveMarker(); } goToPoint(); } function initialize() { var myOptions = { zoom: 16, center: new google.maps.LatLng(42.425175091823974, -83.2943058013916), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); marker = new google.maps.Marker({ position: new google.maps.LatLng(startPos[0], startPos[1]), map: map }); google.maps.event.addListenerOnce(map, 'idle', function() { animateMarker(marker, [ // The coordinates of each point you want the marker to go to. // You don't need to specify the starting position again. [42.42666395645802, -83.29694509506226], [42.42300508749226, -83.29679489135742], [42.42304468678425, -83.29434871673584], [42.424882066428424, -83.2944130897522], [42.42495334300206, -83.29203128814697] ], speed); }); } initialize(); 

Jsfiddle – DEMO

Notez que vous devez ajouter la bibliothèque "géométrie" lorsque vous incluez google maps pour pouvoir utiliser google.maps.geometry.spherical.computeDistanceBetween : http://maps.google.com/maps/api/js?sensor=true&libraries = Géométrie

J'espère que cela aide!