Comment animer un marqueur en douceur avec Google Maps?

Question

J'ai écrit un petit algorithme qui anime le mouvement des marqueurs de d'un point à un autre. L'algorithme ressemble à ceci dans pseudocode:

lat_delta = new_lat - old_lat; 
lng_delta = new_lng - old_lng; 

for(alpha=0; alpha < 1; alpha += 0.1) { 
    lat = old_lat + (alpha * lat_delta); 
    lng = old_lng + (alpha * lng_delta); 
    update_marker(lat, lng); 
} 

Le code complet est disponible à http://dev.syskall.com/map/ et http://dev.syskall.com/map/commute.js.

Le problème que j'ai rencontré est que lorsque la carte est réduite, l'animation semble "zigzag". Cela étant dit, lorsque vous zoomez, l'animation est beaucoup plus lisse.

Je crois que cela peut être dû au fait que mon animation est basée sur coordonnées lat, lng et non pixels sur l'écran. Lorsque vous effectuez un zoom arrière, Google Maps n'est pas aussi précis que et doit contourner la position latlng en quelque sorte.

Bien sûr, la mise en œuvre actuelle est très bien quand la carte est agrandie mais pas si bien quand il est en zoom arrière.

Y a-t-il un moyen de contourner ce problème?

Answer 1

Oui ... l'API gives you methods pour obtenir les coordonnées de pixels de tous vos marqueurs sur la carte. Je fais ce qui suit:

obtenir les co-ords de pixels de votre marqueur

render un marqueur factice sur cet endroit

enlever le marqueur d'origine

animer votre mannequin au nouveau spot en utilisant des valeurs de pixels

place un nouveau marqueur de carte sur place

Enlever le mannequin

Au début et à la fin, vous pouvez utiliser l'API pour obtenir des pixels et vice versa.