jquery - Google map v3，在两个以上点之间动画折线

Question

到目前为止，在我的页面上，我可以为两点之间的折线设置动画，但我不知道如何做更多的事情。

示例 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

如果您检查示例 1 fiddle (请原谅 setMarkers，它需要大量整理)，第一个点和最后一个点之间的动画会导致在它们之间绘制一条直线，而不是遵循四个点的路径，这就是为什么当只有两个点时我可以让它完美地工作。

我认为我必须创建某种循环来在连续点之间画一条线，例如1 到 2、2 到 3、3 到 4 等，但我似乎无法让它工作(尝试将 postcode_4_lat_lng 更改为 postcode_2_lat_lng，这就是我的意思试图在所有点之间实现)。

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

如果我尝试这样做，我只会收到无限量的 Uncaught TypeError: Cannot read property 'k' of undefined 错误。

Example 2 Fiddle

Answer 1

我使用了稍微不同的动画方法，基于 this post 。您可以按设定的时间间隔向 map 添加各个点，而不是使用插值。

这是我为实现此目的而编写的方法(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++

其中 @map 是 Google map 对象的实例