谷歌地图动画不适用于 setInterval 和 setTimeout

Question

I'm developing animation with google maps API. I get some problem with setInteval and setTimeout.

Actually, In line 247 in my jsfiddle I define myFunction(see below) which calls the function fi() each 300ms to animate the marker.

 var myFunction = function(){ counter= 300; clearInterval(myInterval); var myInterval = setInterval(fi, counter, map, marker, g); }

I want that function fi() (see below) animates the marker then when it arrives to a marker it stops a while before to move. To achieve this, I clear the setInterval ( Line 301 ) then I recall myFunction() to restart the animation after a delay using setTimeout.

 function fi(m, mar, l) { if (l[i].waypoint == 0) { coords= l[i]; var latlng = new google.maps.LatLng(parseFloat(coords.lat), parseFloat(coords.lng)); route.getPath().push(latlng); moveMarker(map, marker, latlng); i++; coords= l[i]; var latlng = new google.maps.LatLng(parseFloat(coords.lat), parseFloat(coords.lng)); route.getPath().push(latlng); moveMarker(map, marker, latlng); } else { clearInterval(myInterval); i++; setTimeout(myFunction, 500); } }

I'm expecting that the animation continue after some delay but it stops.

Any suggestion ?

Thanks

Answer 1

Make myInterval global, and it works for me.

updated fiddle

var myInterval;
var myFunction = function(){
  counter= 300;
  clearInterval(myInterval);
  myInterval = setInterval(fi, counter, map, marker, g);
}