如何动画谷歌地图api圈

how to animate google maps api circle?

本文关键字：谷歌地图 api 动画 何动画      更新时间：2023-09-26

我已经在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
});

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

您可以使用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中的更新示例。

--2021解决方案：--

这可能是一个古老的问题和答案，但从现在（2021年）起，这仍然与谷歌地图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>

相关文章：