Google Maps v3，在两个以上点之间动画折线答案

【问题标题】：Google Maps v3, animating polyline between more than two pointsGoogle Maps v3，在两个以上点之间动画折线
【发布时间】：2015-02-25 13:23:49
【问题描述】：

到目前为止，在我的页面上，我可以为两点之间的折线制作动画，但除此之外我不知道该怎么做。

示例 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 小提琴（请原谅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

【问题讨论】：

我认为您可以自己进行插值
@sabotero，抱歉，不确定您的意思。
在循环的最后一次迭代中执行var end_point = points[i + 1]; 时会出现错误。尝试将迭代器更改为i < points.length - 1
您需要执行类似this 的操作（沿折线制作动画）。
好地方@duncan，我自己之前就注意到了，但并没有那么担心。感谢链接 geocodezip。我设法以一种丑陋的方式解决了它，我会尝试发布它，以防将来有人需要它，但是可以对其进行很多改进。

标签： jquery google-maps google-maps-api-3

【解决方案1】：

我根据this post 对动画使用了稍微不同的方法。您无需使用interpolate，而是以设定的时间间隔将各个点添加到地图中。

这是我为实现此目的而编写的方法（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 对象的实例

【讨论】：

【解决方案2】：

你需要：

初始化地图
显示或添加标记
使用Directions Service 计算它们之间的方向。 3.1 如果您有多个标记，您可以将它们设置为航点。
绘制一条折线并使用 setTimeout 移动标记并调整地图视图。

换句话说，标记在折线内每 x 秒更新一次，并且地图一起移动。

我用两个标记和它们之间的动画做了一个例子。 Codepen

希望能帮到你！

【讨论】：