动画谷歌地图折线 [英] Animate google maps polyline

问题描述

我想提请在谷歌地图动画（测）折线，有点像这样： http://planefinder.net /路由/ SFO /

I'd like to draw an animated (geodesic) polyline in google maps, a bit like this: http://planefinder.net/route/SFO/

我发现如何动画沿折线象征很多教程，但没有关于从源到目标动画折线本身。

I found many tutorials on how to animate a symbol along a polyline, but nothing about animating the polyline itself from the source to the destination.

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

Any hints ? Where should I start ?

任何帮助真的是AP preciated。

Any help is really appreciated.

推荐答案

我已经有一些成功的以下内容：

I've had some success with the following:

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

这基本上是使用间隔重绘的路径。在每一步，可见，动画路径使得从出发抵达的路径的比例较大，直到最后到达到达的位置。

This is basically using an interval to redraw the path. At each step, the visible, animated path makes up a larger percentage of the total path from departure to arrival until finally the arrival location is reached.

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