javascript - 如何影响点击google map？

Question

<分区>

Answer 1

有趣的想法。经过一些摆弄后，这是我所做的方法

1) 使用 javascript 在点击位置附加一个新元素和我想出的一些 CSS 动画 this demo

对应的CSS动画:

@keyframes grow {
    0% {
        width: 5px;
        height: 5px;
        margin-top: -2.5px;
        margin-left: -2.5px;
    }
    50% {
        margin-top:-7.5px;
        margin-left: -7.5px;
        width: 15px;
        height: 15px;
        opacity: 1;
    }
    100% {
        margin-top:-12.5px;
        margin-left: -12.5px;
        width: 25px;
        height: 25px;
        opacity: 0;
    }
}

2) 我无法在 Google map 上重现你对这个的意思，但根据你的描述我想出了 this demo

对应的CSS动画:

@keyframes pulse {
    0% {
        width: 5px;
        height: 5px;
        margin-top: -4.5px;
        margin-left: -4.5px;
    }
    100% {
        margin-top:-14.5px;
        margin-left: -14.5px;
        width: 25px;
        height: 25px;
    }
}

这些方法适用于任何支持 CSS3 动画的浏览器，可以找到列表 here .后备类似的解决方案是使用相同的方法，但使用 jQuery 的 .animate 或类似的东西来代替

如果不支持动画，第一个只是一个 5px x 5px 的圆圈，一秒钟后删除。第二个是一个黑点，一直持续到再次单击文档为止。

旁注:在目前的状态下，我认为它无法在 IE 中运行，因为它不支持 document.getElementsByClassName