Comment faire pour déplacer le marqueur le long d'une polyligne à l'aide de google map

Vous pouvez utiliser pour votre travail que votre approche fondée sur un marqueur personnalisé animation: animer séparément le mouvement du wagon et la voiture tourne dans tous les points directeurs. Pour cela, Vous avez besoin de 2 types d'animation:

1) animation pour le mouvement du wagon;

2) animation pour les voitures de tour;

qui appelle les uns des autres sur sa fin (le mouvement du wagon de l'animation sur la fin appels de voiture tourner animation et vice versa: la voiture de tourner animation sur sa fin appels de voiture de mouvement, d'animation et donc pour tous les points de la voiture de chemin d'accès).

Par exemple sur la fig.:

1) animation pour le mouvement du wagon de P0 à P1;

2) animation pour la voiture tourner sur P1;

3) animation pour le mouvement du wagon de P1 à P2

et ainsi de suite.

Voiture de mouvement d'animation peut être mis en œuvre par la méthode comme ceci:

private void animateCarMove(final Marker marker, final LatLng beginLatLng, final LatLng endLatLng, final long duration) {
final Handler handler = new Handler();
final long startTime = SystemClock.uptimeMillis();
final Interpolator interpolator = new LinearInterpolator();
//set car bearing for current part of path
float angleDeg = (float)(180 * getAngle(beginLatLng, endLatLng) / Math.PI);
Matrix matrix = new Matrix();
matrix.postRotate(angleDeg);
marker.setIcon(BitmapDescriptorFactory.fromBitmap(Bitmap.createBitmap(mMarkerIcon, 0, 0, mMarkerIcon.getWidth(), mMarkerIcon.getHeight(), matrix, true)));
handler.post(new Runnable() {
@Override
public void run() {
//calculate phase of animation
long elapsed = SystemClock.uptimeMillis() - startTime;
float t = interpolator.getInterpolation((float) elapsed / duration);
//calculate new position for marker
double lat = (endLatLng.latitude - beginLatLng.latitude) * t + beginLatLng.latitude;
double lngDelta = endLatLng.longitude - beginLatLng.longitude;
if (Math.abs(lngDelta) > 180) {
lngDelta -= Math.signum(lngDelta) * 360;
}
double lng = lngDelta * t + beginLatLng.longitude;
marker.setPosition(new LatLng(lat, lng));
//if not end of line segment of path 
if (t < 1.0) {
//call next marker position
handler.postDelayed(this, 16);
} else {
//call turn animation
nextTurnAnimation();
}
}
});
}

où

mMarkerIcon est:

Bitmap mMarkerIcon;
...
mMarkerIcon = BitmapFactory.decodeResource(getResources(), R.drawable.the_car);  //for your car icon in file the_car.png in drawable folder

et de voiture sur l'icône doit être orientée Nord:

pour corriger la rotation s'appliquent

nextTurnAnimation() - méthode appelée sur l'extrémité de la voiture en mouvement, de l'animation pour démarrer la voiture tourner animation:

private void nextTurnAnimation() {
mIndexCurrentPoint++;
if (mIndexCurrentPoint < mPathPolygonPoints.size() - 1) {
LatLng prevLatLng = mPathPolygonPoints.get(mIndexCurrentPoint - 1);
LatLng currLatLng = mPathPolygonPoints.get(mIndexCurrentPoint);
LatLng nextLatLng = mPathPolygonPoints.get(mIndexCurrentPoint + 1);
float beginAngle = (float)(180 * getAngle(prevLatLng, currLatLng) / Math.PI);
float endAngle = (float)(180 * getAngle(currLatLng, nextLatLng) / Math.PI);
animateCarTurn(mCarMarker, beginAngle, endAngle, TURN_ANIMATION_DURATION);
}
}

À son tour à la voiture de tourner à l'animation de la méthode peut être comme ceci:

private void animateCarTurn(final Marker marker, final float startAngle, final float endAngle, final long duration) {
final Handler handler = new Handler();
final long startTime = SystemClock.uptimeMillis();
final Interpolator interpolator = new LinearInterpolator();
final float dAndgle = endAngle - startAngle;
Matrix matrix = new Matrix();
matrix.postRotate(startAngle);
Bitmap rotatedBitmap = Bitmap.createBitmap(mMarkerIcon, 0, 0, mMarkerIcon.getWidth(), mMarkerIcon.getHeight(), matrix, true);
marker.setIcon(BitmapDescriptorFactory.fromBitmap(rotatedBitmap));
handler.post(new Runnable() {
@Override
public void run() {
long elapsed = SystemClock.uptimeMillis() - startTime;
float t = interpolator.getInterpolation((float) elapsed / duration);
Matrix m = new Matrix();
m.postRotate(startAngle + dAndgle * t);
marker.setIcon(BitmapDescriptorFactory.fromBitmap(Bitmap.createBitmap(mMarkerIcon, 0, 0, mMarkerIcon.getWidth(), mMarkerIcon.getHeight(), m, true)));
if (t < 1.0) {
handler.postDelayed(this, 16);
} else {
nextMoveAnimation();
}
}
});
}

où nextMoveAnimation() est:

private void nextMoveAnimation() {
if (mIndexCurrentPoint <  mPathPolygonPoints.size() - 1) {
animateCarMove(mCarMarker, mPathPolygonPoints.get(mIndexCurrentPoint), mPathPolygonPoints.get(mIndexCurrentPoint+1), MOVE_ANIMATION_DURATION);
}
}

La mPathPolygonPoints (geopoints de trajet en voiture) est:

private List<LatLng> mPathPolygonPoints;

Et la mIndexCurrentPoint variable est l'indice de point actuel sur le chemin d'accès (il devrait être 0 au début de l'animation et incrémenté à chaque tour de chemin dans nextTurnAnimation() méthode).

TURN_ANIMATION_DURATION - durée (en ms) de l'animation pour la voiture tourner sur le chemin geopoint;

MOVE_ANIMATION_DURATION - durée (en ms) de l'animation pour les voitures circulation dans le segment de la ligne de chemin;

Pour obtenir de roulement, Vous pouvez utiliser la méthode comme ça:

private double getAngle(LatLng beginLatLng, LatLng endLatLng) {
double f1 = Math.PI * beginLatLng.latitude / 180;
double f2 = Math.PI * endLatLng.latitude / 180;
double dl = Math.PI * (endLatLng.longitude - beginLatLng.longitude) / 180;
return Math.atan2(Math.sin(dl) * Math.cos(f2) , Math.cos(f1) * Math.sin(f2) - Math.sin(f1) * Math.cos(f2) * Math.cos(dl));;
}

Enfin, Vous pouvez lancer toutes les animations par appel animateCarMove() une fois:

animateCarMove(mCarMarker, mPathPolygonPoints.get(0), mPathPolygonPoints.get(1), MOVE_ANIMATION_DURATION);

les autres étapes de l'animation sera appelé automatiquement pour chaque point de la voiture de chemin.

Et Vous devez prendre en compte certains "cas spéciaux" comme:

1) changement de signe de de la tour d'angle (par exemple, portant modifications de -120 à 150 degrés);

2) les possibilités d'interruption de l'animation par l'utilisateur;

3) calculer animation durée sur le chemin de la longueur du segment (par exemple, 1 sec de 1 km de longueur de segment au lieu de fixe MOVE_ANIMATION_DURATION)

4) probablement tune valeur 16 dans handler.postDelayed(this, 16); ligne pour de meilleures performances;

5) et ainsi de suite.

Je pense que ce que vous cherchez est Marqueur Animations.

Vous pouvez animer des marqueurs de sorte qu'ils présentent la dynamique du mouvement dans un
variété de circonstances différentes. Pour spécifier la façon dont un marqueur est
animé, utilisez le marqueur de l'animation de la propriété, de type
google.cartes.De l'Animation. L'Animation suivante valeurs sont prises en charge:

-GOUTTE indique que le marqueur doit tomber du haut de la carte à leur emplacement final lors de leur première mise sur la carte. Animation cessera
une fois le marqueur vient pour se reposer et animation de revenir à la valeur null. Cette
type d'animation est généralement spécifié lors de la création de la marque.

-De REBOND indique que le marqueur devrait rebondir en place. Un rebond marqueur continuera de rebondir jusqu'à ce que son animation de la propriété est
explicitement définie à null.

Voici un extrait de ce guide:

var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 59.325, lng: 18.070}
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 59.327, lng: 18.067}
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}