javascript – 在给定时间内在谷歌地图上设置圆圈的半径增长/缩小

2019年8月4日 161次阅读

我试图在Google Maps API上设置圆圈半径的增长/缩小动画.现在我所拥有的是JS中的一个方法,它采用给定的时间,最终半径并计算半径的增量,并计算时间速率(或等待直到下一次循环的毫秒数) .问题是它的工作时间较长(如3秒或更长),而较小的时间它会比它应该的更多(几乎所有低于或等于1秒的时间,它都是2秒).

这是方法>

var animateRadius = function(change){
        var radiusDelta = Math.abs(change.FinalRadius-Circle.getRadius());
        var radiusChangeRate = 1;
        var timeRate = (radiusChangeRate*change.FinalTime)/radiusDelta;
        if(timeRate <= 1){
            /*since the setInterval method only works with miliseconds
              if the timespan is less than one milisecond, the radius change 
              rate has to be bigger in order to make it on time, and since this
              only happens in smaller times, I think the error is around here..*/ 
            timeRate = 1;
            radiusChangeRate = (timeRate*radiusDelta)/change.FinalTime; 
                        }
        if(change.FinalRadius > Circle.getRadius()){
            //This just tells if the circle is growing or shrinking
            radiusChangeRate = radiusChangeRate*-1; 
        }

        var interval = window.setInterval(function(){
            if(visionRadiusCircle.getRadius() == change.FinalRadius){
                window.clearInterval(interval);
                interval = 0;
            }
            Circle.setRadius(Circle.getRadius() - radiusChangeRate);

        }, timeRate);
    }

我无法弄清楚为什么这不起作用.有什么想法吗？任何想法都是受欢迎的,即使它是一个不同的算法(我甚至不确定是否有更好的方法来做到这一点).

谢谢！

最佳答案 这就是我所做的.您可以通过调整setTimeout函数中给出的时间间隔来调整动画.
http://jsbin.com/oritec/2/edit

 function getCircle() {
    var circle = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: 0.6,
    scale: 2,
    strokeColor: 'red',
    strokeWeight: 1,
    strokeOpacity: 0.6
    };
    return circle;
      }
      function init() {
    var mapCenter = new google.maps.LatLng(41.7833, 5.2167);

    var map = new google.maps.Map(document.getElementById('map'), {
      'zoom': 2,
      'center': mapCenter,
       draggable: false,
       disableDefaultUI: true,
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    });
    var rad = 0;
    var sop = 1;
    var sw = 1;
    var fillop = 1;     
    var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(18.7000, 79.1833),
      icon: getCircle(),
      draggable: false
    });

   for(var i=0;i<10;i++)
     {  
       setTimeout(function(){                   
                    animate();
                    rad += 50000;
                    sop -= 0.1;
                    fillop -= 0.1;
                    sw -= 0.1;
                },i* 50);
     }  

  function animate(){
         var circle2 = new google.maps.Circle({
      map: map,
      radius: rad, 
      center: new google.maps.LatLng(18.7000, 79.1833),
      strokeColor: "#FF0000",
      fillColor: "#FF0000",
      fillOpacity: fillop,
      strokeWeight: sw,
      strokeOpacity: sop
    });
     setTimeout(function(){ 
       circle2.setMap(null); },100);
}   
      } 
      google.maps.event.addDomListener(window, 'load', init);
点赞