javascript - 动画折线因纬度/经度数组而失败

Question

我正在尝试使用 google.maps.geometry.spherical.interpolate 来制作一组纬度/经度的动画。我可以成功地为两个纬度/经度点设置动画，但是当我尝试循环它们时，我看不到所有点都设置动画。我的方法有什么问题吗？

以下是如何为两点设置动画:http://jsfiddle.net/4kgg7536/9/

function initMap() {			
var map = new google.maps.Map(document.getElementById('map'), {
 'zoom': 10,
			'center': new google.maps.LatLng(25.969937410307143, -80.0804620727539),
			'mapTypeId': google.maps.MapTypeId.TERRAIN,
			'scrollwheel': true,
			'draggable':true
		});
  
		var flightPath = {
		  one: [
			new google.maps.LatLng(26.248630099430756,-80.05024967041015), 
    new google.maps.LatLng(26.136493049813648, -80.16423282470703),        
    new google.maps.LatLng(26.034120197851937,-80.04475650634765), 
    new google.maps.LatLng(25.957590547577706,-80.1573663696289), 
    new google.maps.LatLng(25.827870363354016,-80.03239688720703), 
			new google.maps.LatLng(25.698007870576784,-80.14500675048828)
		  ]};
		
		var flightSymbol = {
		  path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
		  strokeOpacity: 1,
		  scale: 3
		};
	
		var pathSymbol = {
		  path: 'M 0,-0.5 0,0.5',
		  strokeOpacity: 1,
		  strokeWeight:3,
		  scale: 4
		}		
	
		 flightRoute = new google.maps.Polyline({
		  path: flightPath.one,
		  geodesic: true,
		  strokeOpacity: 0,
		  icons: [
			{
			  icon: flightSymbol,
			  offset: '100%'
			}, {
			  icon: pathSymbol,
			  offset: '0',
			  repeat: '15px'
			},
		  ],
		  strokeOpacity: 0,
		  strokeColor: '#f00',
		  map: map
		});
	
	  var departure = flightPath['one'][0];
		var arrival = flightPath['one'][4];
			
		var step = 0;
		var numSteps = 500; //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);
				 flightRoute.setPath([departure, are_we_there_yet]);
			 }
			}, timePerStep);
	} 	

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initMap&libraries=geometry"></script>
<div  id="map" style="width: 525px;height: 500px;"></div>  

现在，我尝试为一组纬度/经度设置动画，但没有成功:

function initMap() {			
var map = new google.maps.Map(document.getElementById('map'), {
 'zoom': 10,
			'center': new google.maps.LatLng(25.969937410307143, -80.0804620727539),
			'mapTypeId': google.maps.MapTypeId.TERRAIN,
			'scrollwheel': true,
			'draggable':true
		});
  
		var flightPath = {
		  one: [
			new google.maps.LatLng(26.248630099430756,-80.05024967041015), 
    new google.maps.LatLng(26.136493049813648, -80.16423282470703),        
    new google.maps.LatLng(26.034120197851937,-80.04475650634765), 
    new google.maps.LatLng(25.957590547577706,-80.1573663696289), 
    new google.maps.LatLng(25.827870363354016,-80.03239688720703), 
			new google.maps.LatLng(25.698007870576784,-80.14500675048828)
		  ]};
		
		var flightSymbol = {
		  path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
		  strokeOpacity: 1,
		  scale: 3
		};
	
		var pathSymbol = {
		  path: 'M 0,-0.5 0,0.5',
		  strokeOpacity: 1,
		  strokeWeight:3,
		  scale: 4
		}		
	
		 flightRoute = new google.maps.Polyline({
		  path: flightPath.one,
		  geodesic: true,
		  strokeOpacity: 0,
		  icons: [
			{
			  icon: flightSymbol,
			  offset: '100%'
			}, {
			  icon: pathSymbol,
			  offset: '0',
			  repeat: '15px'
			},
		  ],
		  strokeOpacity: 0,
		  strokeColor: '#f00',
		  map: map
		});
	
for(i=0;i<=flightPath['one'].length-2;i++)
		{
	  var departure = flightPath['one'][i];
		var arrival = flightPath['one'][i+1];
			
		var step = 0;
		var numSteps = 500; //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);
				 flightRoute.setPath([departure, are_we_there_yet]);
			 }
			}, timePerStep);
       }
	} 	

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initMap&libraries=geometry"></script>
<div  id="map" style="width: 525px;height: 500px;"></div>  

上面的代码片段有以下更改，我将所有内容都放在 for 循环中，但只有最后两点有动画。我没有清除 map ，为什么只显示最后两点？

for(i=0;i<=flightPath['one'].length-2;i++)
{
    var departure = flightPath['one'][i];
    var arrival = flightPath['one'][i+1];

    var step = 0;
    var numSteps = 500; //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);
             flightRoute.setPath([departure, are_we_there_yet]);
         }
    }, timePerStep);
}

Answer 1

google.maps.geometry.spherical.interpolate 仅适用于折线上的两点之间。您需要更新 setInterval 函数以处理多组点。将其放入 for 循环中只会在折线的最后两点之间运行(循环迭代到最后一组点，然后运行设置的间隔函数)。

如果您希望折线保留在较早的点之间，则必须创建一个新的折线来填充之前的历史记录。

proof of concept fiddle

代码片段:

var flightRoute, flightRouteCompleted;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    'zoom': 10,
    'center': new google.maps.LatLng(25.969937410307143, -80.0804620727539),
    'mapTypeId': google.maps.MapTypeId.TERRAIN,
    'scrollwheel': true,
    'draggable': true
  });

  var flightPath = {
    one: [
      new google.maps.LatLng(26.248630099430756, -80.05024967041015),
      new google.maps.LatLng(26.136493049813648, -80.16423282470703),
      new google.maps.LatLng(26.034120197851937, -80.04475650634765),
      new google.maps.LatLng(25.957590547577706, -80.1573663696289),
      new google.maps.LatLng(25.827870363354016, -80.03239688720703),
      new google.maps.LatLng(25.698007870576784, -80.14500675048828)
    ]
  };
  for (var i = 0; i < flightPath["one"].length; i++) {
    var marker = new google.maps.Marker({
      position: flightPath["one"][i],
      map: map,
      title: "" + i
    })
  }

  var flightSymbol = {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
    strokeOpacity: 1,
    scale: 3
  };

  var pathSymbol = {
    path: 'M 0,-0.5 0,0.5',
    strokeOpacity: 1,
    strokeWeight: 3,
    scale: 4
  }

  flightRoute = new google.maps.Polyline({
    path: flightPath.one,
    geodesic: true,
    strokeOpacity: 0,
    icons: [{
      icon: flightSymbol,
      offset: '100%'
    }, {
      icon: pathSymbol,
      offset: '0',
      repeat: '15px'
    }, ],
    strokeOpacity: 0,
    strokeColor: '#f00',
    map: map
  });
  flightRouteCompleted = new google.maps.Polyline({
    geodesic: true,
    strokeOpacity: 0,
    icons: [{
      icon: pathSymbol,
      offset: '0',
      repeat: '15px'
    }, ],
    strokeOpacity: 0,
    strokeColor: '#f00',
    map: map
  });
  var departure = flightPath["one"][0];
  var arrival = flightPath['one'][1];
  var i = 0;
  var step = 0;
  var numSteps = 500; //Change this to set animation resolution
  var timePerStep = 5; //Change this to alter animation speed
  var interval = setInterval(function() {
    step += 1;
    if (i >= (flightPath["one"].length - 1)) {
      clearInterval(interval);
    } else if (step > numSteps) {
      i++;
      step = 0;
      departure = flightPath["one"][i];
      arrival = flightPath['one'][i + 1];
      if (i == 1) {
        flightRouteCompleted.setPath([flightPath["one"][0]]);
      }
      flightRouteCompleted.getPath().push(flightPath["one"][i]);
    } else {
      var are_we_there_yet = google.maps.geometry.spherical.interpolate(departure, arrival, step / numSteps);
      flightRoute.setPath([departure, are_we_there_yet]);
    }
  }, timePerStep);
}
google.maps.event.addDomListener(window, "load", initMap);

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map" style="width: 525px;height: 500px;"></div>