【问题标题】:Animate google maps polyline为谷歌地图折线制作动画
【发布时间】:2013-05-23 22:40:19
【问题描述】:

我想在谷歌地图中绘制一条动画(测地线)折线,有点像这样:http://planefinder.net/route/SFO/

我找到了许多关于如何沿多段线为符号设置动画的教程,但没有关于将多段线本身从源到目的地设置动画的内容。

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

非常感谢任何帮助。

【问题讨论】:

    标签: javascript google-maps polyline animated


    【解决方案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);
    

    这基本上是使用间隔来重绘路径。在每一步,可见的动画路径占从出发到到达直到最终到达到达位置的总路径的较大百分比。

    【讨论】:

    • 如果我们有几条折线以不同的速度制作动画会怎样。 setInterval 会造成麻烦吗?这可以使用 setTimeout 完成吗?
    • 您正在将 are_we_there_yet 传递给 setPath,根据文档,它只需要一个数组。 are_we_there_yet 和数组是什么?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-14
    • 1970-01-01
    • 1970-01-01
    • 2013-07-02
    • 2023-04-06
    • 1970-01-01
    相关资源
    最近更新 更多