Javascript 谷歌地图圈动画

我正在开发一个脚本，以鼓励在谷歌地图API中增加/减少圆的半径。但是只有一个圆是动画的，首先我滚动数组，在地图上画圆，然后给半径设置动画（缩小和放大）。解决方案可能是在循环中包含一个间隔。我期待你的帮助，谢谢

函数初始化（）{
var _半径=500；
变量rMin=_半径*4/5；
var rMax=_半径；
var方向=1；
var citymap={芝加哥：{中心：{拉特：-12.008711，液化天然气：-77.053376}}，纽约：{中心：{拉特：-12.01075，液化天然气：-77.070083}，洛杉矶：{中心：{拉特：-12.005359，液化天然气：-77.06835}，温哥华：{中心：{拉特：-11.99086，液化天然气：-77.068101}；
变量映射选项={
中心：{lat:-12.004129，lng:-77.056904}，
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map”），
地图选项）；
用于（城市地图中的var城市）{
变量循环选项={
中心：城市地图[城市]。中心，
填充颜色：'#3878c7'，
填充不透明度：0.6，
地图：地图，
半径：500，
strokeColor:“#3878c7”，
频闪不透明度：1，
冲程重量：0.5
};
var circle=新的google.maps.circle（circleOption）；
}
var circleTimer=setInterval（函数（）{
var radius=circle.getRadius（）；
如果（（半径>rMax）| |（半径

html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图{高度：90%；宽度：90%}
您仅为创建圆的最后一个“城市”创建setInterval函数。解决此问题的一个选项是使用函数闭包将setInterval函数与圆关联：

for (var city in citymap) {
  createCircle(citymap[city], map);
}

function createCircle(city, map) {
  var _radius = 500;
  var rMin = _radius * 4 / 5;
  var rMax = _radius;
  var direction = 1;
  var circleOption = {
    center: city.center,
    fillColor: '#3878c7',
    fillOpacity: 0.6,
    map: map,
    radius: 500,
    strokeColor: '#3878c7',
    strokeOpacity: 1,
    strokeWeight: 0.5
  };
  var circle = new google.maps.Circle(circleOption);

  var circleTimer = setInterval(function() {
    var radius = circle.getRadius();

    if ((radius > rMax) || (radius < rMin)) {
      direction *= -1;
    }
    var _par = (radius / _radius) - 0.7;

    circleOption.radius = radius + direction * 10;
    circleOption.fillOpacity = 0.6 * _par;

    circle.setOptions(circleOption);
  }, 20);
}