Polyline路徑上的動畫標記

Question

我在Google地圖上有3 markers。

1. Two Markers顯示starting and ending points

下面是使用繪製折線這兩個點之間的代碼：

private void polyLine() { 

    LatLng starting = new LatLng(##.######, ##.######); 
    LatLng ending = new LatLng(##.######, ##.######); 

    PolylineOptions line = new PolylineOptions().add(starting, ending); 

    mGoogleMap.addMarker(new MarkerOptions().position(starting).title("Start")); 
    mGoogleMap.addMarker(new MarkerOptions().position(ending).title("End")); 

    mGoogleMap.addPolyline(line); 

} 

One Marker顯示current Location [HUE_ROSE]

並以animate marker to current location使用：

@Override 
public void onLocationChanged(Location location) 
{ 
    Toast.makeText(this, "Location Changed " + location.getLatitude() 
      + location.getLongitude(), Toast.LENGTH_LONG).show(); 

    mLastLocation = location; 

    if (mCurrLocationMarker != null) { 
     mCurrLocationMarker.remove(); 
    } 

    LatLng latLng = new LatLng(location.getLatitude(), location.getLongitude()); 

    if(ourGlobalMarker == null) { // First time adding marker to map 
     ourGlobalMarker = mGoogleMap.addMarker(new MarkerOptions().position(latLng) 
       .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE))); 
     MarkerAnimation.animateMarkerToICS(ourGlobalMarker, latLng, new LatLngInterpolator.Spherical()); 
     mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng, 18)); 
    } else { 
     MarkerAnimation.animateMarkerToICS(ourGlobalMarker, latLng, new LatLngInterpolator.Spherical()); 
     mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng, 18)); 
    } 

} 

問題：

Getting Animating Marker, but right side of Polyline

SOLUTION：

How Can I show Animated Marker on Polyline Path

我嘗試了很多找到solution這一個，但did not find任何東西，分享你的suggestions。

Answer 1

試試用設置錨狀如下

mDetailPositionMarker = mDetailGoogleMap.addMarker(new MarkerOptions() 
        .position(newLatLonValue) 
        .anchor(0.5f, 0.5f) 
        .rotation(bearingValue) 
        .flat(true) 
        .icon(BitmapDescriptorFactory.fromResource(R.drawable.biketopicon))); 

並確保你的圖標將不會有任何填充或保證金。避免圖標圖像中的空間不如以下所示的內容。

Answer 2

我假設你有3個標誌 1.源點 2.目標點 3.移動標記

你一定要試試這種方式它會幫助你

private void animateMarkerNew(final LatLng startPosition, final LatLng destination, final Marker marker) { 

     if (marker != null) { 

      final LatLng endPosition = new LatLng(destination.latitude, destination.longitude); 

      final float startRotation = marker.getRotation(); 
      final LatLngInterpolatorNew latLngInterpolator = new LatLngInterpolatorNew.LinearFixed(); 

      ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1); 
      valueAnimator.setDuration(2000); // duration 3 second 
      valueAnimator.setInterpolator(new LinearInterpolator()); 
      valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
       @Override 
       public void onAnimationUpdate(ValueAnimator animation) { 
        try { 
         float v = animation.getAnimatedFraction(); 
         LatLng newPosition = latLngInterpolator.interpolate(v, startPosition, endPosition); 
         marker.setPosition(newPosition); 
         googleMap.moveCamera(CameraUpdateFactory.newCameraPosition(new CameraPosition.Builder() 
           .target(newPosition) 
           .zoom(18f) 
           .build())); 

         marker.setRotation(getBearing(startPosition, new LatLng(destination.latitude, destination.longitude))); 
        } catch (Exception ex) { 
         //I don't care atm.. 
        } 
       } 
      }); 
      valueAnimator.addListener(new AnimatorListenerAdapter() { 
       @Override 
       public void onAnimationEnd(Animator animation) { 
        super.onAnimationEnd(animation); 

        // if (mMarker != null) { 
        // mMarker.remove(); 
        // } 
        // mMarker = googleMap.addMarker(new MarkerOptions().position(endPosition).icon(BitmapDescriptorFactory.fromResource(R.drawable.icon_car))); 

       } 
      }); 
      valueAnimator.start(); 
     } 
    } 

注意：marker是指您想要爲其中一個設置動畫的標記。

private interface LatLngInterpolatorNew { 
     LatLng interpolate(float fraction, LatLng a, LatLng b); 

     class LinearFixed implements LatLngInterpolatorNew { 
      @Override 
      public LatLng interpolate(float fraction, LatLng a, LatLng b) { 
       double lat = (b.latitude - a.latitude) * fraction + a.latitude; 
       double lngDelta = b.longitude - a.longitude; 
       // Take the shortest path across the 180th meridian. 
       if (Math.abs(lngDelta) > 180) { 
        lngDelta -= Math.signum(lngDelta) * 360; 
       } 
       double lng = lngDelta * fraction + a.longitude; 
       return new LatLng(lat, lng); 
      } 
     } 
    } 


//Method for finding bearing between two points 
private float getBearing(LatLng begin, LatLng end) { 
    double lat = Math.abs(begin.latitude - end.latitude); 
    double lng = Math.abs(begin.longitude - end.longitude); 

    if (begin.latitude < end.latitude && begin.longitude < end.longitude) 
     return (float) (Math.toDegrees(Math.atan(lng/lat))); 
    else if (begin.latitude >= end.latitude && begin.longitude < end.longitude) 
     return (float) ((90 - Math.toDegrees(Math.atan(lng/lat))) + 90); 
    else if (begin.latitude >= end.latitude && begin.longitude >= end.longitude) 
     return (float) (Math.toDegrees(Math.atan(lng/lat)) + 180); 
    else if (begin.latitude < end.latitude && begin.longitude >= end.longitude) 
     return (float) ((90 - Math.toDegrees(Math.atan(lng/lat))) + 270); 
    return -1; 
} 

Answer 3

// Animation handler for old APIs without animation support 
private void animateMarkerTo(final Marker marker, final double lat, final double lng) { 
    final Handler handler = new Handler(); 
    final long start = SystemClock.uptimeMillis(); 
    final long DURATION_MS = 3000; 
    final Interpolator interpolator = new AccelerateDecelerateInterpolator(); 
    final LatLng startPosition = marker.getPosition(); 
    handler.post(new Runnable() { 
     @Override 
     public void run() { 
      float elapsed = SystemClock.uptimeMillis() - start; 
      float t = elapsed/DURATION_MS; 
      float v = interpolator.getInterpolation(t); 

      double currentLat = (lat - startPosition.latitude) * v + startPosition.latitude; 
      double currentLng = (lng - startPosition.longitude) * v + startPosition.longitude; 
      marker.setPosition(new LatLng(currentLat, currentLng)); 

      // if animation is not finished yet, repeat 
      if (t < 1) { 
       handler.postDelayed(this, 16); 
      } 
     } 
    }); 
} 

呼叫onLocationChange方法中此方法並傳入位置經緯度和朗然後你會看到一個神奇;）

Answer 4

你爲什麼不使用藍色位置圖標，而不是使用標記的？ ????