Javascript 如何动画谷歌地图api圈？

我已经在

CSS3

中构建了一个脉冲动画，我想在googlemapsapi中的to marker中实现，不幸的是，它不可能直接插入到地图中。对于

CSS3

animation或 是否有可能使谷歌地图圆圈作为动画增加和减少

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
});

---

演示

您可以使用

setRadius（）

方法更改圆半径，并使用

setInterval（）

制作动画：

var方向=1；
var rMin=150，rMax=300；
setInterval（函数（）{
var radius=circle.getRadius（）；
如果（（半径>rMax）| |（半径

看

---

更新：缩放时的半径：必须使用因子2进行更改。请参阅更新。

非常感谢您的回复。有可能保持不变的半径大小吗？你是什么意思？要固定内圆和外扩/缩或其他东西吗？缩放时半径很大，我希望保持相同的大小，就像这个更新的示例一样。顺便说一句：你的CSS动画在Chrome上不起作用。好的。

    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);