动画Google地图标记 [英] Animate google map markers

问题描述

我希望做到这样的动画

在这里，当用户点击/悬停在列表中的任何地方时，相应的地方将以动画方式突出显示在地图上。我怎么做到这一点？

我做了一些Google，但找不到任何文档。任何人都可以提供一些有用的资源或链接？

解决方案

不幸的是，您不能使用css访问标记对象，因为它不是一个部分的DOM，它是画布的一部分。但是，您可以使用自定义样式的自定义叠加层来实现您的目标想要。

对于脉冲效果，您可以使用CSS动画。您可以在下面找到一个示例;

1）;不透明度：1; } 100％{transform：scale3d（2.2，2.2，1）;不透明度：0; }}＃脉冲前，＃脉冲后{动画：3s缓解0s正常无无限脉冲;背景：无重复滚动0 0 rgba（0，0，0，0.5）; border-radius：24px; box-shadow：0 0 10px rgba（0，0，0，0.7）inset;内容：;身高：48px;剩下：50％;保证金：-24px 0 0 -24px;指针事件：无;位置：绝对;顶部：50％;宽度：48px; z-index：-1;}＃脉冲：在{animation-delay：1.5s;}之后＃脉冲{width：50px; height：50px;背景：#ffffff url（'http://www.blogher.com/files/imagecache/tiny_thumb/user_pictures/picture-196261.jpg'）no-repeat center center;位置：相对; border-radius：25px; text-align：center; font：bold 14px / 50px tahoma;}

< div id =pulse>< / div>

I want to do achieve something like this animation

Here when the user clicks/ hovers over any place in the list, the corresponding place is highlighted on the map in an animated fashion. How can i achieve this ?

I did some Google but could not find any documentation for it. Can anyone suggest some useful resource or links?

解决方案

Unfortunately you can't access the marker object with css because it's not a part of the DOM, it's part of the canvas. But you may use custom overlays with custom styles to achive what you want.

For the pulse effect you can use CSS animations. You can find an example below;

body {
    padding: 40px;
}
@keyframes pulse {
    0% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform: scale3d(2.2, 2.2, 1);
        opacity: 0;
    }
}
#pulse:before, #pulse:after {
    animation: 3s ease-out 0s normal none infinite running pulse;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7) inset;
    content:"";
    height: 48px;
    left: 50%;
    margin: -24px 0 0 -24px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    width: 48px;
    z-index: -1;
}
#pulse:after {
    animation-delay: 1.5s;
}
#pulse {
    width: 50px;
    height: 50px;
    background: #ffffff url('http://www.blogher.com/files/imagecache/tiny_thumb/user_pictures/picture-196261.jpg') no-repeat center center;
    position: relative;
    border-radius: 25px;
    text-align: center;
    font: bold 14px/50px tahoma;
}

<div id="pulse"></div>

这篇关于动画Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！