求助：Google Map中标记沿Polyline路线移动动画实现

Hey there! I’ve helped debug similar marker animation issues before, so let’s break down exactly how to get your rider marker smoothly moving along the drawn route when their location updates from Firebase.

First, Let’s Fix the Core Issue #

The mistake most folks make here is directly jumping the marker to the new Firebase location instead of interpolating its movement along the pre-defined Polyline path. Here’s a step-by-step solution tailored to your setup:

1. Make Sure You’ve Got the Polyline Path Ready #

First, confirm you’re correctly extracting all the LatLng points from your drawn Polyline. This is the "roadmap" your marker will follow:

// Assume you already have your Polyline drawn on the map
const riderRoutePolyline = new google.maps.Polyline({
  path: riderToDestinationCoordinates, // Array of LatLngs between rider and destination
  strokeColor: "#FF0000",
  map: yourMapInstance
});

// Extract the full path as an array of LatLng objects
const routePathPoints = riderRoutePolyline.getPath().getArray();

2. Listen for Firebase Location Updates (User Side) #

When the rider’s location is pushed to Firebase, don’t just set the marker’s position immediately. Instead, trigger a smooth animation along the route:

// Listen for real-time updates to the rider's location in Firebase
firebase.database().ref('rider/current-location').on('value', (snapshot) => {
  const updatedRiderLatLng = snapshot.val(); // Should be { lat: X, lng: Y }
  if (!updatedRiderLatLng) return;

  const targetPosition = new google.maps.LatLng(updatedRiderLatLng.lat, updatedRiderLatLng.lng);
  animateMarkerAlongRoute(yourRiderMarker, routePathPoints, targetPosition);
});

3. The Core Animation Function #

This function will move the marker incrementally along the Polyline, instead of jumping. It uses requestAnimationFrame for smooth, browser-optimized movement:

function animateMarkerAlongRoute(marker, routePoints, targetPosition) {
  // First, find where the marker currently is on the route
  const currentPointIndex = findClosestRoutePoint(routePoints, marker.getPosition());
  // Find where the target location sits on the route
  const targetPointIndex = findClosestRoutePoint(routePoints, targetPosition);

  // If we're already at the target, no need to animate
  if (currentPointIndex === targetPointIndex) {
    marker.setPosition(targetPosition);
    return;
  }

  // Animation settings (tweak these for speed/smoothness)
  const totalAnimationSteps = 60; // Higher = smoother, slower
  let currentStep = 0;

  const animateFrame = () => {
    if (currentStep >= totalAnimationSteps) {
      marker.setPosition(targetPosition);
      return;
    }

    // Calculate progress along the current segment of the route
    const progress = currentStep / totalAnimationSteps;
    const currentRoutePoint = routePoints[currentPointIndex];
    const nextRoutePoint = routePoints[currentPointIndex + 1];

    // Interpolate the LatLng for this frame
    const interpolatedLat = currentRoutePoint.lat() + (nextRoutePoint.lat() - currentRoutePoint.lat()) * progress;
    const interpolatedLng = currentRoutePoint.lng() + (nextRoutePoint.lng() - currentRoutePoint.lng()) * progress;

    // Update the marker's position
    marker.setPosition(new google.maps.LatLng(interpolatedLat, interpolatedLng));
    currentStep++;

    // Queue the next frame
    requestAnimationFrame(animateFrame);
  };

  // Start the animation
  animateFrame();
}

// Helper: Find the index of the route point closest to a given LatLng
function findClosestRoutePoint(routePoints, targetLatLng) {
  let closestIndex = 0;
  let smallestDistance = Infinity;

  routePoints.forEach((point, index) => {
    const distance = google.maps.geometry.spherical.computeDistanceBetween(point, targetLatLng);
    if (distance < smallestDistance) {
      smallestDistance = distance;
      closestIndex = index;
    }
  });

  return closestIndex;
}

Critical Notes to Avoid Common Pitfalls #

• Don’t forget the Geometry Library: To use computeDistanceBetween, you need to load Google Maps with the geometry library. Add this to your map script URL: &libraries=geometry
• Debounce Frequent Updates: If the rider’s location updates very often (e.g., every second), add a debounce to prevent overlapping animations.
• Adjust Animation Speed: Tweak totalAnimationSteps—higher values mean slower, smoother movement; lower values mean faster, snappier movement.
• Optimize Long Routes: For very long paths, you can slice the routePoints array to only include points near the marker’s current position, reducing computation.

内容的提问来源于stack exchange，提问作者Nabeel Ahmed Jandha