Javascript Girl
  1. Javascript Girl
  3. L'orientation de Google Map suit les emplacements spécifiques
Intereting Posts
Applications Web iPhone en cours d'exécution en tant qu'applications natives Thread Safety dans Javascript? Comment jQuery peut-il être différé? Int ((0.1 + 0.7) * 10) = 7 dans plusieurs langues. Comment éviter cela? Le port série ne fonctionne pas? Accès à un périphérique USB Midi via le Web JQuery: référencer la portée externe dans le rappel Traitement des événements entre navigateurs Ajouter et supprimer la classe active à partir d'un lien de navigation Fullcalendar "typeError: Impossible de lire la propriété 'hasTime' de undefined" Le meilleur type de contenu pour servir JSONP? JQuery sort les éléments à l'aide de l'ID de données Analyse du HTML à partir d'une chaîne JSON avec jQuery Générer un hachage à partir de la chaîne dans Javascript / jQuery Retour Javascript pour l'attribut "pattern" HTML5 sur <input>

L'orientation de Google Map suit les emplacements spécifiques

J'ai plusieurs emplacements tirés de DB commandés chronologiquement – je place les emplacements dans la carte et je crée une polyligne qui les relie.

Je voudrais savoir comment faire ce qui suit: je souhaite mettre un bouton "Play" quelque part sur la page qui finit par dérouler la mise au point de la fenêtre Map le long des bords de la polyligne depuis l'emplacement le plus ancien jusqu'à la dernière. La meilleure option serait si la transition est séquentielle (ne pas sauter d'un endroit à l'autre).

Je n'ai pas beaucoup d'expérience avec Google Maps API, mais je suppose que c'est vraiment facile à faire. (Avec setTimeout peut-être?)

Merci.

Un exemple d'animation d'un marqueur le long d'une polyligne est:

http://www.geocodezip.com/v3_animate_marker_xml.html

Code porté à partir du tutoriel v2 de Mike Williams . 

 //=============== animation functions ====================== function updatePoly(d) { // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow if (poly2.getPath().getLength() > 20) { poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]); // map.addOverlay(poly2) } if (polyline.GetIndexAtDistance(d) < lastVertex+2) { if (poly2.getPath().getLength()>1) { poly2.getPath().removeAt(poly2.getPath().getLength()-1) } poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.GetPointAtDistance(d)); } else { poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.getPath().getAt(polyline.getPath().getLength()-1)); } } function animate(d) { if (d>eol) { var endlocation = polyline.getPath().getAt(polyline.getPath().getLength()-1); map.panTo(endlocation); marker.setPosition(endlocation); return; } var p = polyline.GetPointAtDistance(d); map.panTo(p); marker.setPosition(p); updatePoly(d); timerHandle = setTimeout("animate("+(d+step)+")", tick); } function startAnimation() { if (timerHandle) clearInterval(timerHandle); eol=polyline.Distance(); map.setCenter(polyline.getPath().getAt(0)); if (marker) { marker.setMap(null); delete marker; marker = null; } if (!marker) marker = new google.maps.Marker({location:polyline.getPath().getAt(0), map:map} /* ,{icon:car} */); poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#0000FF", strokeWeight:10}); setTimeout("animate(50)",2000); // Allow time for the initial map display } //=============== ~animation functions =====================