如何动画谷歌地图api圈？

Question

我已经构建了一个脉冲动画,CSS3我想在google maps api中实现标记,遗憾的是它无法直接插入到地图中.是否有任何CSS3动画选项或 是否可以使谷歌地图圈增加和减少动画.

var myCity = new google.maps.Circle({
    center: bigOne,
    radius: 150,
    strokeColor: "#E16D65",
    strokeWeight: 2,
    fillColor: "#E16D65",
    fillOpacity: 0
});
var smallcircle = new google.maps.Circle({
    center: smallOne,
    radius: 300,
    strokeColor: "#E16D65",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "#E16D65",
    fillOpacity: 0
});

演示http://jsfiddle.net/gbqzQ/4/

Answer 1

您可以使用setRadius()方法更改圆半径并使用setInterval()以下命令制作动画:

    var direction = 1;
    var rMin = 150, rMax = 300;
    setInterval(function() {
        var radius = circle.getRadius();
        if ((radius > rMax) || (radius < rMin)) {
            direction *= -1;
        }
        circle.setRadius(radius + direction * 10);
    }, 50);

请参阅jsbin上的示例.

更新:缩放时的半径:您必须使用因子2更改它.请参阅jsbin上的更新示例.