Google地图折线动画化

Question

我想在谷歌地图上绘制一个动态的（大圆弧）折线，有点像这个：http://planefinder.net/route/SFO/ 我发现很多教程都是关于如何沿着折线动画化地移动符号，但没有关于如何从源地址动画化绘制整条折线到目标地址。

有什么提示吗？我应该从哪里开始？

非常感谢您的帮助。

- emathias

Answer 1

我在以下方面取得了一些成功：

 var departure = new google.maps.LatLng(dept_lat, dept_lng); //Set to whatever lat/lng you need for your departure location
 var arrival = new google.maps.LatLng(arr_lat, arr_lng); //Set to whatever lat/lng you need for your arrival location
 var line = new google.maps.Polyline({
      path: [departure, departure],
      strokeColor: "#FF0000",
      strokeOpacity: 1,
      strokeWeight: 1,
      geodesic: true, //set to false if you want straight line instead of arc
      map: map,
 });
 var step = 0;
 var numSteps = 250; //Change this to set animation resolution
 var timePerStep = 5; //Change this to alter animation speed
 var interval = setInterval(function() {
     step += 1;
     if (step > numSteps) {
         clearInterval(interval);
     } else {
         var are_we_there_yet = google.maps.geometry.spherical.interpolate(departure,arrival,step/numSteps);
         line.setPath([departure, are_we_there_yet]);
     }
 }, timePerStep);

这基本上是使用一个时间间隔来重新绘制路径。在每一步中，可见的动画路径占出发地到目的地总路径的比例越来越大，直到最终到达目的地位置。

- Pedro Cattori

---

如果我们有几条折线以不同的速度进行动画，那会怎样呢？setInterval 会出问题吗？这可以使用 setTimeout 来完成吗？ - Jabran Saeed

你正在将 are_we_there_yet 传递给 setPath，而根据文档，setPath 只接受数组。什么是 are_we_there_yet 和数组？ - jdog