Question

我已经在CSS3中构建了一个脉冲动画我想在谷歌地图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
});

DEMO 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。

如何动画谷歌地图api圈？

1 个答案: