当前位置:  开发笔记 > 编程语言 > 正文

动画谷歌地图折线

如何解决《动画谷歌地图折线》经验,为你挑选了1个好方法。

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

我发现了很多关于如何沿折线设置符号动画的教程,但没有关于将折线本身从源设置到目标的动画.

任何提示?我应该从哪里开始?

任何帮助都非常感谢.



1> Pedro Cattor..:

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

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

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

推荐阅读
小白也坚强_177
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有