javascript - Google マップのポリラインをアニメーション化する

Question

次のように、Google マップでアニメーション化された (測地線) ポリラインを描画したいと思います: http://planefinder.net/route/SFO/

ポリラインに沿ってシンボルをアニメーション化する方法に関する多くのチュートリアルを見つけましたが、ポリライン自体をソースから宛先までアニメーション化する方法については何も見つかりませんでした。

ヒントはありますか？どこから始めればよいですか？

どんな助けでも本当に感謝しています。

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

これは基本的に間隔を使用してパスを再描画しています。各ステップでは、目に見えるアニメーション化されたパスが、出発から到着までの全パスの大部分を占め、最終的に到着場所に到達します。