动画多个折线上的多个图标

Question

目前，我正在开发一个项目，可以将折线和圆形从一个点动画到另一个点：http://jsfiddle.net/sumeetbansal/7nmz788j/，但我一直无法调整我发现的一些代码来运行其中一些动画折线同时进行。

function initialize() {
var mapOptions = {
    center: new google.maps.LatLng(22.291, 53.027),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

el = document.getElementById('map-canvas');
var map = new google.maps.Map(el,mapOptions);

var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
    };

var start = new google.maps.LatLng (32.291, 3.027);
var endpt = new google.maps.LatLng (12.291, 103.027);
var coord = [start, endpt];
var line = new google.maps.Polyline({
    path: coord,
    strokeColor: '#393',
    strokeOpacity: 1,
    strokeWeight: 1,
    geodesic: true,
    map: map,
    icons: [{
        icon: lineSymbol,
        offset: '100%'
    }],
});

 var startpt = new google.maps.Marker({
  position: start,
  icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 8,
      strokeColor: '#393'
      },
  map: map,
  });

animateCircle();
var step = 0;
var numSteps = 250; 
var timePerStep = 1; 
var interval = setInterval(function() {
    step += 1;
    if (step > numSteps) {
        clearInterval(interval);
    } else {
        var theMotion = google.maps.geometry.spherical.interpolate(start,endpt,step/numSteps);
        line.setPath([start, theMotion]);
    }
  }, timePerStep);
}

function animateCircle() {
    var count = 0;
    window.setInterval(function() {
        count = (count + 1) % 200;
        var icons = line.get('icons');
        icons[0].offset = (count / 2) + '%';
        line.set('icons', icons);
        }, 20);
    }

google.maps.event.addDomListener(window, 'load', initialize);

以下是该项目的当前版本：http://jsfiddle.net/sumeetbansal/39gmud42/。我包含了一个包含折线新坐标的数组，并使用了循环来遍历每组坐标，但是在我尝试集成新代码（从这里：Plotting multiple polylines on Google Maps）和我之后，它似乎没有起作用。已经被困了2天的大部分时间。以下是新代码：

var trackLine = [];
var trackLats = [
  [
    [14.735, -20.595],
    [-13.913, 8.188]
  ],
  [
    [-14.788, 20.562],
    [13.879, -8.230]
  ],
  [
    [14.784, -20.546],
    [-13.818, 8.288]
  ],
  [
    [-14.837, 20.513],
    [13.784, -8.329]
  ],
  [
    [14.892, -20.439],
    [-13.758, 8.350]
   ]
  ];
var trackLons = [
  [
    [76.480, 90.967],
    [68.509, 98.386]
  ],
  [
    [-115.254, -100.759],
    [-123.226, -93.342]
  ],
  [
    [53.036, 67.521],
    [45.065, 74.937]
  ],
  [
    [-138.698, -124.204],
    [-146.669, -116.791]
  ],
  [
    [29.567, 44.049],
    [21.570, 51.438]
  ]
];

function initialize() {
 var mapOptions = {
        center: new google.maps.LatLng(22.291, 53.027),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

  el = document.getElementById('map-canvas');
  var map = new google.maps.Map(el,mapOptions);

  var trackCoords = new google.maps.MVCArray;
  var i, j, k;

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#0099FF'          
    };

 for (i = 0; i < 5; i++) {
    for (j = 0; j < 2; j++) {
      trackCoords = [];
      for (k = 0; k < 2; k++) {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
          trackLons[i][j][k]));
      }
      trackLine.push(new google.maps.Polyline({
      path: trackCoords,
      strokeColor: '#0099FF',
      strokeOpacity: 1,
      strokeWeight: 1,
      geodesic: true,
      map: map,
      icons: [{
          icon: lineSymbol,
          offset: '100%'
      }],
  }));

  var startpt = new google.maps.Marker({
      position: start,
      icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 8,
          strokeColor: '#0099FF'
          },
      map: map,
      });

  animateCircle();
  var step = 0;
  var numSteps = 250;           
  var timePerStep = 1;          
  var interval = setInterval(function() {
      step += 1;
      if (step > numSteps) {
          clearInterval(interval);
      } else {
          var theMotion = google.maps.geometry.spherical.interpolate(start,endpt,step/numSteps);
          line.setPath([start, theMotion]);
          }
      }, timePerStep);
trackCoords.clear;
    }
 }

function animateCircle() {
    var count = 0;
    window.setInterval(function() {
        count = (count + 1) % 200;
        var icons = line.get('icons');
        icons[0].offset = (count / 2) + '%';
        line.set('icons', icons);
        }, 20);
    }

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

您需要引用animateCircle函数中的所有折线。修改它以使用数组trackLines。

function animateCircle() {
  var count = 0;
  window.setInterval(function() {
    for (var i = 0; i < trackLine.length; i++) {

      count = (count + 1) % 200;
      var icons = trackLine[i].get('icons');
      icons[0].offset = (count / 2) + '%';
      trackLine[i].set('icons', icons);
    }
  }, 200);
}

要为线条设置动画，您需要跟踪动态折线和完整的结果折线。

更改代码中的匿名“setInterval”函数：

var interval = setInterval(function () {
    step += 1;
    if (step > numSteps) {
        clearInterval(interval);
    } else {
        for (var i = 0; i < trackLineM.length; i++) {
            var lastIdx = trackLineM[i].getPath().getLength() - 1;
            var theMotion = google.maps.geometry.spherical.interpolate(trackLineM[i].getPath().getAt(0), trackLineM[i].getPath().getAt(lastIdx), step / numSteps);
            trackLine[i].setPath([trackLineM[i].getPath().getAt(0), theMotion]);
            trackLine[i].setMap(map);
        }
    }
}, timePerStep);

proof of concept fiddle

代码段

var trackLine = [];
var trackLineM = [];
var trackLats = [
  [
    [14.735, -20.595],
    [-13.913, 8.188]
  ],
  [
    [-14.788, 20.562],
    [13.879, -8.230]
  ],
  [
    [14.784, -20.546],
    [-13.818, 8.288]
  ],
  [
    [-14.837, 20.513],
    [13.784, -8.329]
  ],
  [
    [14.892, -20.439],
    [-13.758, 8.350]
  ]
];
var trackLons = [
  [
    [76.480, 90.967],
    [68.509, 98.386]
  ],
  [
    [-115.254, -100.759],
    [-123.226, -93.342]
  ],
  [
    [53.036, 67.521],
    [45.065, 74.937]
  ],
  [
    [-138.698, -124.204],
    [-146.669, -116.791]
  ],
  [
    [29.567, 44.049],
    [21.570, 51.438]
  ]
];

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-22.291, 53.027),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  el = document.getElementById('map-canvas');
  var map = new google.maps.Map(el, mapOptions);

  var trackCoords = new google.maps.MVCArray;
  var i, j, k;

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#0099FF'
  };

  for (i = 0; i < 5; i++) {
    for (j = 0; j < 2; j++) {
      trackCoords = [];
      for (k = 0; k < 2; k++) {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
          trackLons[i][j][k]));
      }
      trackLineM.push(new google.maps.Polyline({
        path: trackCoords,
        strokeColor: '#0099FF',
        strokeOpacity: 1,
        strokeWeight: 1,
        geodesic: true,
        // map: map,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }]
      }));
      trackLine.push(new google.maps.Polyline({
        strokeColor: '#0099FF',
        strokeOpacity: 1,
        strokeWeight: 1,
        geodesic: true,
        // map: map,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }]
      }));

      animateCircle();
      var step = 0;
      var numSteps = 250;
      var timePerStep = 200;
      var interval = setInterval(function() {
        step += 1;
        if (step > numSteps) {
          clearInterval(interval);
        } else {
          for (var i = 0; i < trackLineM.length; i++) {
            var lastIdx = trackLineM[i].getPath().getLength() - 1;
            var theMotion = google.maps.geometry.spherical.interpolate(trackLineM[i].getPath().getAt(0), trackLineM[i].getPath().getAt(lastIdx), step / numSteps);
            trackLine[i].setPath([trackLineM[i].getPath().getAt(0), theMotion]);
            trackLine[i].setMap(map);
          }
        }
      }, timePerStep);
      trackCoords.clear;
    }
  }
}

function animateCircle() {
  var count = 0;
  window.setInterval(function() {
    for (var i = 0; i < trackLineM.length; i++) {

      count = (count + 1) % 200;
      var icons = trackLineM[i].get('icons');
      icons[0].offset = (count / 2) + '%';
      trackLineM[i].set('icons', icons);
    }
  }, 200);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>