如何在Google Maps Directions API返回的经纬度点间生成新点位？

Got it, so you want to fill in extra Lat/Lng markers between the start points of each route step returned by the Google Maps Directions Service—this is super useful for making your path look smoother or adding more granular points for things like animation. Here's a straightforward way to do this:

Core Idea: Linear Interpolation #

Between any two geographic coordinates (lat1, lng1) and (lat2, lng2), you can calculate intermediate points by linearly interpolating the latitude and longitude values. This works great for most cases where the route segment between steps is roughly a straight line (which is often the case for Directions Service steps).

Step 1: Add an Interpolation Function #

First, create a helper function that takes two points and the number of intermediate points you want to generate, then returns an array of those midpoints:

// Generates n intermediate points between start and end coordinates
function interpolatePoints(start, end, numPoints) {
  const points = [];
  const latDiff = end.lat() - start.lat();
  const lngDiff = end.lng() - start.lng();
  
  // Calculate the step increment for lat and lng
  const latStep = latDiff / (numPoints + 1);
  const lngStep = lngDiff / (numPoints + 1);
  
  // Generate each intermediate point
  for (let i = 1; i <= numPoints; i++) {
    const newLat = start.lat() + (latStep * i);
    const newLng = start.lng() + (lngStep * i);
    points.push(new google.maps.LatLng(newLat, newLng));
  }
  
  return points;
}

Step 2: Integrate This Into Your Existing Code #

Modify your loop over the route steps to generate intermediate points between each consecutive pair of step start points. Don't forget to handle the first step (add its start point) and the last step (add its start point too):

directionsService.route(request, function(result, status) {
  if (status == 'OK') {
    directionsDisplay.setDirections(result);
    const myRoute = result.routes[0].legs[0];
    const markerArray = [];
    const numIntermediatePoints = 5; // Adjust this number to get more/less points
    
    // Add the first step's start point
    let prevPoint = myRoute.steps[0].start_point;
    let marker = new google.maps.Marker({
      position: prevPoint,
      map: map
    });
    attachInstructionText(marker, myRoute.steps[0].instructions);
    markerArray.push(marker);
    
    // Loop through remaining steps to add intermediate points and step start points
    for (let i = 1; i < myRoute.steps.length; i++) {
      const currentPoint = myRoute.steps[i].start_point;
      
      // Generate and add intermediate points
      const midPoints = interpolatePoints(prevPoint, currentPoint, numIntermediatePoints);
      midPoints.forEach(midPoint => {
        const midMarker = new google.maps.Marker({
          position: midPoint,
          map: map
        });
        // Optional: Add a generic instruction or leave blank for midpoints
        attachInstructionText(midMarker, '');
        markerArray.push(midMarker);
      });
      
      // Add the current step's start point
      marker = new google.maps.Marker({
        position: currentPoint,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray.push(marker);
      
      prevPoint = currentPoint;
    }
  }
});

Notes for Better Accuracy #

• If you need points that follow the exact road curvature (not just straight lines), you can use the Google Maps Roads API's InterpolateRoads endpoint. This will snap your intermediate points to the actual road, but it requires an additional API call and billing.
• Adjust numIntermediatePoints to control how many points are added between each step—higher numbers mean smoother paths but more markers.

内容的提问来源于stack exchange，提问作者mostamazingname