谷歌地图v3，动画多点之间的折线 [英] Google Maps v3, animating polyline between more than two points

问题描述

到目前为止，在我的页面上，我可以为两点之间的折线制作动画，但我无法弄清楚如何做到这一点。

示例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 {
 //动画仍在运行
 running = true; 
} 
 
 //计算进度
 var progressLatLng = google.maps.geometry.spherical.interpolate（postcode_1_lat_lng，postcode_4_lat_lng，progress）; 
 //更新折线
 flightPathProgress.setOptions（{
 strokeOpacity：progress，
 path：[postcode_1_lat_lng，progressLatLng] 
}）; 
}，50）; 
}，1000）; 
  

示例1小提琴

如果您检查示例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; 
 
（i = 0; 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 {
 //动画仍在运行
 running = true; 
} 
 
 //计算进度
 var progressLatLng = google.maps.geometry.spherical.interpolate（start_point，end_point，progress）; 
 //更新折线
 flightPathProgress.setOptions（{
 strokeOpacity：progress，
 path：[postcode_1_lat_lng，progressLatLng] 
}）; 
}，50）; 
} 
}，1000）; 
  

如果我尝试以这种方式进行操作，我只能得到无限量的 Uncaught TypeError：无法读取undefined 错误的属性'k'。

示例2小提琴

解决方案

您需要：

1. 初始化映射
   
2. 显示或添加标记
   
3. 使用路线服务来计算它们之间的路线。
   3.1如果您有多个标记，您可以将它们设置为航点。


4. 绘制一条折线并使用setTimeout移动标记并调整地图视图。 b $ b

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

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

我希望能帮到你你！

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

解决方案

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!

这篇关于谷歌地图v3，动画多点之间的折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！