Google 映射动画不适用于 setInterval 和 setTimeout

Question

我正在使用 google 地图 API 开发动画。我在使用 setInteval 和 setTimeout 时遇到了一些问题。

实际上，在我的 jsfiddle 的第 247 行中，我定义了 myFunction（见下文），它每 300 毫秒调用函数 fi() 来为标记设置动画。

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

我希望函数 fi()（见下文）为标记设置动画，然后当它到达标记时它会在移动之前停止一会儿。为此，我清除了 setInterval（第 301 行），然后调用 myFunction() 在使用 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);
    
    }
}

我希望动画在延迟一段时间后继续播放，但它停止了。

有什么建议吗？

谢谢

Answer 1

使 myInterval 全局化，这对我有用。

updated fiddle

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

Google 映射动画不适用于 setInterval 和 setTimeout

Google maps animation not working with setInterval and setTimeout

javascript

settimeout

setinterval

google-maps-api-3