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

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

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

示例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; for (i = 0; i  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错误的Uncaught TypeError: Cannot read property 'k' of undefined 。

例2小提琴

Answer 1

在这篇文章的基础上，我对动画采用了略微不同的方法。 您可以按设定的间隔向地图添加单个点，而不是使用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对象的实例

Answer 2

你需要：

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

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

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

希望对你有所帮助！