如何为谷歌地图api圈制作动画？答案

【问题标题】：how to animate google maps api circle?如何为谷歌地图api圈制作动画？
【发布时间】：2014-05-30 12:20:01
【问题描述】：

我在CSS3我想在谷歌地图api中实现一个脉冲动画，不幸的是它不可能直接插入到地图中。 CSS3 动画是否有任何选项或谷歌地图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/

【问题讨论】：

标签： javascript css google-maps google-maps-api-3 css-animations

【解决方案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。

【讨论】：

非常感谢您的回复。是否可以保持恒定的半径大小？
什么意思？固定内圈，外圈扩大/缩小或其他？
缩放时半径很大，我想保持这样的大小natgeo125.appspot.com
更新示例。顺便说一句：你的 CSS 动画在 Chrome 上不起作用。 FF 没问题。

【解决方案2】：

-- 2021年解决方案：--

这可能是一个古老的问题和答案，但现在 截至目前 (2021) 仍然适用于 Google Maps API。同样使用 svg 在当时并不流行。因此，我使用内联样式标签创建了一个模拟圆形的动画 svg 图标。您可以将width 和height 设置为您想要的要求，并将其添加为标记：

const marker = new google.maps.Marker({
    map: map,
    icon: "/img/marker.svg"
});

SVG：

<svg width="40px" height="40px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <style>
        circle {
            fill: #d2546b;
            stroke: #d2546b;
            stroke-width: 1px;
            stroke-opacity: 1;
        }
        .pulse {
            fill: #7F40E2;
            fill-opacity: 0;
            transform-origin: 50% 50%;
            animation-duration: 2s;
            animation-name: pulse;
            animation-iteration-count: infinite;
        }
        @keyframes pulse {
            from {
                stroke-width: 5px;
                stroke-opacity: 1;
                transform: scale(0.3);
            }
            to {
                stroke-width: 0;
                stroke-opacity: 0;
                transform: scale(2);
            }
        }
    </style>
    </defs>
    <circle cx="50%" cy="50%" r="5px"></circle>
    <circle class="pulse" cx="50%" cy="50%" r="8px"></circle>
</svg>

【讨论】：