Dấu đánh dấu động trên đường dẫn Polyline

Question

Tôi có 3 markers trên Bản đồ Google.

1. Two Markers để hiển thị starting and ending points

Đây là đoạn mã sử dụng để vẽ một Polyline giữa hai điểm này:

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

} 

2. One Marker để hiển thị current Location [HUE_ROSE]

Và để animate marker to current location sử dụng:

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

} 

VẤN ĐỀ:

Getting Animating Marker, but right side of Polyline

SOLUTION:

How Can I show Animated Marker on Polyline Path

tôi cố gắng rất nhiều để tìmsolution cho thế này, nhưng did not find bất cứ điều gì, hãy chia sẻ suggestions của bạn.

Answer 1

Hãy thử với thiết neo như sau

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

Và chắc chắn rằng biểu tượng của bạn sẽ không được có bất kỳ đệm hoặc lề. Tránh không gian không cần thiết trong hình ảnh biểu tượng so với nội dung như được hiển thị bên dưới.

Answer 2

Tôi giả sử bạn có 3 điểm đánh dấu 1. điểm Nguồn 2. Destination Point 3. Di chuyển điểm đánh dấu

bạn phải cố gắng theo cách này nó sẽ giúp bạn

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

Lưu ý: điểm đánh dấu có nghĩa là điểm đánh dấu bạn muốn tạo ảnh động cho điểm đánh dấu đó.

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

gọi phương pháp này bên trong phương pháp onLocationChange và vượt qua vị trí lat và lang sau đó bạn sẽ thấy một màn ảo thuật;)

Answer 4

Tại sao bạn không sử dụng biểu tượng vị trí màu xanh thay vì sử dụng các điểm đánh dấu? ????