Wie bewegen Markierung entlang Polylinie mit google-map

Können Sie für Ihre Aufgabe, Ihren Ansatz, basierend auf benutzerdefinierten marker animation: animiert separat Bewegung Auto und das Auto dreht sich in alle Richtung Punkte. Dafür benötigen Sie 2 Arten von animation:

1) animation für Bewegung Auto;

2) animation für Auto-drehen;

fordert einander auf deren Ende (Auto-Bewegung-animation am Ende ruft Auto-turn-animation und Umgekehrt: Auto-turn-animation am Ende fordert, Auto, Bewegung, animation und so für alle Punkte von dem Auto Weg).

Zum Beispiel auf der Abb.:

1) animation für Auto-Bewegung aus P0 zu P1;

2) animation für Auto-turn-on P1;

3) animation für Auto-Bewegung aus P1 zu P2

und so weiter.

Auto-Bewegung-animation umgesetzt werden können, durch die Methode, wie diese:

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();
                }
            }
        });
    }

wo

mMarkerIcon ist:

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

- und Auto-Symbol sollte nach Norden ausgerichtet:

korrekte Drehrichtung gelten

nextTurnAnimation() - Methode aufgerufen, Ende Bewegung Auto-animation zu starten, Auto-turn-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);
        }
    }

Wiederum Auto-turn-animation-Methode kann wie folgt sein:

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();
                }
            }
        });
    }

wo nextMoveAnimation() ist:

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

Den mPathPolygonPoints (geopoints von Auto, Reise):

private List<LatLng> mPathPolygonPoints;

Und die mIndexCurrentPoint variable ist der index der aktuellen Position auf Pfad (es sollte 0 sein, zum start der animation und erhöht auf jede Wendung der Pfad in nextTurnAnimation() - Methode).

TURN_ANIMATION_DURATION - Dauer (in ms) animation für Auto-turn-Pfad auf geopoint;

MOVE_ANIMATION_DURATION - Dauer (in ms) animation für car Bewegung entlang der Linie segment des Pfades;

Bekommen Lager, das Sie können, verwenden Sie die Methode so:

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));;
    }

Schließlich können Sie beginnen, alle Animationen-by-call animateCarMove() einmal:

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

anderen Schritte der animation aufgerufen wird, werden automatisch für jeden Punkt von dem Auto Weg.

Und Sie sollten take in Konto einige "Sonderfälle" wie:

1) wechselnde Vorzeichen der Drehwinkel (z.B. bei änderungen von -120 bis 150°);

2) Möglichkeiten für unterbrechen der animation durch den Benutzer;

3) berechnen Sie die Animations-Dauer auf Pfad-segment Länge (z.B. 1 sec für 1 km Länge von Segmenten anstelle von fixen MOVE_ANIMATION_DURATION)

4) wahrscheinlich tune Wert 16 im handler.postDelayed(this, 16); Linie für eine bessere performance;

5) und so weiter.

Ich denke was du suchst ist Marker-Animationen.

Animieren Sie die Marker so, dass Sie zeigen dynamische Bewegung in einem
verschiedene Umstände. Um festzulegen, wie eine Markierung ist
animierte, verwenden Sie die marker-animation der Eigenschaft, der Art
google.maps.Animation. Die folgende Animation-Werte werden unterstützt:

DROP gibt an, dass die Markierung gelöscht werden soll, aus der Oberseite der Karte an Ihren endgültigen Standort, wenn Sie zuerst auf der Karte platziert. Animation wird aufhören
sobald die Markierung zur Ruhe kommt und die animation wird wieder auf null. Diese
Art der animation ist in der Regel angegeben bei der Erstellung der Marker.

-BOUNCE bedeutet, dass die marker sollten bounce in place. Ein springender marker wird weiterhin Prellen, bis Sie die animation-Eigenschaft
explizit auf null gesetzt.

Hier ist ein Ausschnitt aus der Anleitung:

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);
        }
      }