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小提琴（请原谅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使用略有不同的动画方法。您可以按设定的时间间隔向地图添加单个点，而不是使用label。

这是我为实现这个目的所写的方法（Coffeescript）：

interpolate

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

Answer 2

你需要：

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

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

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

我希望能帮到你！

谷歌地图v3，动画多线之间的两个点

2 个答案: