javascript - 如何为 google maps api 圆制作动画？

Question

我在 CSS3 中构建了一个脉冲动画我想在 google maps api 中实现标记不幸的是它不可能直接插入到 map 中。 CSS3 动画或是否有任何选项是否可以将 google map circle 作为动画增加和减少。

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

参见 example at jsbin .

更新:缩放半径:您必须使用因子 2 更改它。请参阅更新的 example at jsbin .