谷歌地图标记脉冲动画？答案

【问题标题】：Google Map Marker pulse animation?谷歌地图标记脉冲动画？
【发布时间】：2012-12-10 09:18:52
【问题描述】：

我想知道有什么方法可以让 Google Map Marker 跳动吗？喜欢这里：http://plebeosaur.us/etc/map/

【问题讨论】：

我通常会选择动画 gif 图像。有趣的是，该网站使用的是 png 图像，而且我在他们的脚本中找不到任何为该动画添加的代码。

标签： google-maps animation google-maps-api-3

【解决方案1】：

查看代码后，我注意到您提供的演示中使用了 CSS pulsate。很高兴看到这方面的其他示例。

他使用静态图像作为中心。

这是可以玩的代码...http://jsfiddle.net/86Ejf/945/

var image = new google.maps.MarkerImage(
    'bluedot_retina.png',
    null, // size
    null, // origin
    new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
    new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
);

【讨论】：

我发现了一个错误，如果你进入开发模式，移动屏幕 - 刷新页面，圆圈不再以点为中心。有什么解决办法吗？问题出在mobile devices - ibb.co/Gs13W8Q

【解决方案2】：

您提供的链接使用纯 css 制作此动画：

@-moz-keyframes pulsate {
    from {
        -moz-transform: scale(0.25);
        opacity: 1.0;
    }
    95% {
        -moz-transform: scale(1.3);
        opacity: 0;
    }
    to {
        -moz-transform: scale(0.3);
        opacity: 0;
    }
}
@-webkit-keyframes pulsate {
    from {
        -webkit-transform: scale(0.25);
        opacity: 1.0;
    }
    95% {
        -webkit-transform: scale(1.3);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(0.3);
        opacity: 0;
    }
}
/* get the container that's just outside the marker image, 
    which just happens to have our Marker title in it */
#map_canvas div.gmnoprint[title="I might be here"] {
    -moz-animation: pulsate 1.5s ease-in-out infinite;
    -webkit-animation: pulsate 1.5s ease-in-out infinite;
    border:1pt solid #fff;
    /* make a circle */
    -moz-border-radius:51px;
    -webkit-border-radius:51px;
    border-radius:51px;
    /* multiply the shadows, inside and outside the circle */
    -moz-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
    -webkit-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
    box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
    /* set the ring's new dimension and re-center it */
    height:51px!important;
    margin:-18px 0 0 -18px;
    width:51px!important;
}


/* hide the superfluous marker image since it would expand and shrink with its containing element */
/*  #map_canvas div[style*="987654"][title] img {*/
    #map_canvas div.gmnoprint[title="I might be here"] img {
        display:none;
    }
    /* compensate for iPhone and Android devices with high DPI, add iPad media query */
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
        #map_canvas div.gmnoprint[title="I might be here"] {
            margin:-10px 0 0 -10px;
        }
    }

当我复制他们的代码和css时，可以确认它在我的网站上有效

【讨论】：

您是否需要对此 CSS/JS 进行任何更改？

【解决方案3】：

SVG在这里可以创造奇迹，如果你不介意IE/Edge compatibility。

我创建了this blue pulsating dot（改编自this one）。

警告：动画未在 Edge 18 上播放 (but should in Edge 75)。

只需替换标记属性中的图像：

var marker = new google.maps.Marker({
  //...
  icon: {
    url: 'path/to/your/image.svg',
    //...
  },
});

【讨论】：

【解决方案4】：

这可能部分回答了您的问题。您可以像在此示例中那样使用动画折线： https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

当然，如果需要，您可以构建更复杂的动画。您还可以使用 setInterval() 图像（透明 PNG）标记或其 css 样式（根据您的示例的框阴影）进行切换，使其看起来像动画。

【讨论】：

今天（2016 年 1 月 12 日）不幸的是，该页面中没有动画符号部分
@yorch 看起来谷歌移动了内容，但我更新了。感谢您指出。