Question

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

    function initialize() {
    var _radius = 500;
    var rMin = _radius * 4/5;
    var rMax = _radius;
    var direction = 1;
	
       
        var citymap = {  chicago: {    center: {lat: -12.008711, lng: -77.053376} },  newyork: {  center: {lat: -12.01075, lng: -77.070083} },  losangeles: { center: {lat: -12.005359, lng: -77.06835} },  vancouver: { center: {lat: -11.990886, lng: -77.068101} }};
        var mapOptions = {
            center: {lat:  -12.004129, lng: -77.056904},
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(document.getElementById("map"),
                        mapOptions);
        
    for (var city in citymap) {
            var circleOption = {
        center: citymap[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);
    } 
  
  
  

    google.maps.event.addDomListener(window, 'load', initialize);

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 90%; width: 90% }
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script-->
    
<script type="text/javascript">

</script>
</head>

<body>
    <div id='map'></div>
</body>
</html>

谢谢此致

Answer 1

您只为最后一个＆＃34;城市＆＃34;创建了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);
}

proof of concept fiddle

代码段

＆＃13;

function initialize() {

  var citymap = {
    chicago: {
      center: {
        lat: -12.008711,
        lng: -77.053376
      },
      fillColor: "red"
    },
    newyork: {
      center: {
        lat: -12.01075,
        lng: -77.070083
      },
      fillColor: "blue"
    },
    losangeles: {
      center: {
        lat: -12.005359,
        lng: -77.06835
      },
      fillColor: "green"
    },
    vancouver: {
      center: {
        lat: -11.990886,
        lng: -77.068101
      },
      fillColor: "orange"
    }
  };
  var mapOptions = {
    center: {
      lat: -12.004129,
      lng: -77.056904
    },
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);

  for (var city in citymap) {
    createCircle(citymap[city], map);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

function createCircle(city, map) {
  var _radius = 500;
  var rMin = _radius * 4 / 5;
  var rMax = _radius;
  var direction = 1;
  var circleOption = {
    center: city.center,
    fillColor: city.fillColor,
    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);
}

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

谷歌地图圈子动画

1 个答案: