Google Maps v3, animating polyline between more than two points

问题

So far on my page I can animate a polyline between two points but I can't figure out how to do it for anything more than that.

Example 1

setTimeout(function() {
    flightPath.setMap(map);
    flightPathProgress.setMap(map);
    flightPathProgress.setOptions({
        strokeOpacity: 0
    });

    var progress = 0;

    var intvl = setInterval(function() {

        progress += 0.01;

        if (progress > 1) { 
            clearInterval(intvl);
            running = false;
        } else {
            // animation is still running
            running = true;
        }

        // calculate progress
        var progressLatLng = google.maps.geometry.spherical.interpolate(postcode_1_lat_lng, postcode_4_lat_lng, progress);
        // update polyline
        flightPathProgress.setOptions({
            strokeOpacity: progress,
            path: [postcode_1_lat_lng, progressLatLng]
        });
    }, 50);
}, 1000);

Example 1 Fiddle

If you check the example 1 fiddle (please forgive the setMarkers, it needs a lot of tidying up), animating between the first and last points results in a direct line being drawn between them rather than following the path of the four points, which is why I can get it to work perfectly fine when there are only two points.

I considered that I must create some sort of loop to draw a line between consecutive points, e.g. 1 to 2, 2 to 3, 3 to 4 etc. but I can't seem to get it to work (try changing postcode_4_lat_lng to postcode_2_lat_lng, that's what I'm trying to achieve between all points).

Example 2

setTimeout(function() {

    flightPath.setMap(map);
    flightPathProgress.setMap(map);
    flightPathProgress.setOptions({
        strokeOpacity: 0
    });

    var points = [postcode_1_lat_lng, postcode_2_lat_lng, postcode_3_lat_lng, postcode_4_lat_lng];
    var i = 0;
    var progress = 0;

    for (i = 0; i < points.length; i++) {
        var start_point = points[i];
        var end_point = points[i + 1];

        var intvl = setInterval(function() {

            progress += 0.01;

            if (progress > 1) { 

                clearInterval(intvl);
                i++;
            } else {
                // animation is still running
                running = true;
           }

           // calculate progress
           var progressLatLng = google.maps.geometry.spherical.interpolate(start_point, end_point, progress);
           // update polyline
           flightPathProgress.setOptions({
               strokeOpacity: progress,
               path: [postcode_1_lat_lng, progressLatLng]
           });
       }, 50);
   }
}, 1000);

If I try and do it this way I just get an infinite amount of Uncaught TypeError: Cannot read property 'k' of undefined errors.

Example 2 Fiddle

回答1:

I use a slightly different approach to the animation, based off this post. Instead of using interpolate, you add individual points to the map at set intervals.

Here is the method I wrote to achieve this (Coffeescript):

grow_polyline: (path, encoded, interval) =>
    if encoded
      poly_path = google.maps.geometry.encoding.decodePath(path)
    else
      poly_path = path


    full_polyline = new google.maps.Polyline
      path: poly_path

    grow_polyline = new google.maps.Polyline
      path: []
      geodesic: true
      strokeColor: '#e87767'
      strokeOpacity: 1.0
      strokeWeight: 7
      map: @map

    i = 0
    full_polyline.getPath().forEach (latLng) =>
      window.timeouts.push setTimeout ((coor) ->
        grow_polyline.getPath().push coor
      ), interval*i, latLng
      i++

Where @map is the instance of the Google Map object

回答2:

You need:

1. Initialize map
2. Display or add markers
3. Use the Directions Service to calculate directions between them. 3.1 If you have multiples markers, you can set them as waypoints.
4. Draw one Polyline and with setTimeout you moves the marker and adjusts the map view.

In other words, the marker is updated for each x seconds inside the polyline and the map is moved together.

I made a example with two markers and the animation between them. Codepen

I hope help you!

来源：https://stackoverflow.com/questions/28720158/google-maps-v3-animating-polyline-between-more-than-two-points