现有标记上的脉冲动画（谷歌地图） [英] pulse animation on existing markers (google maps)

问题描述

我想将一个脉冲动画 添加到我现有的标记上checkbox click，我该怎么做？ 解决方案

这不像你看起来那么容易。我刚刚做了同样的事情，并取得了一些成功。

最直接的方法是使用动画gif作为标记。

如果你想做一个CSS动画，并且对JS更加舒适，你可以使用下面的代码在添加所有标记之后为所有制作者添加一个包装，它会创建一个新的覆盖到标记窗格并给出一类 .marker-layer 。

这个问题的一个问题是如果可能，Google地图尝试使用画布呈现图标，这意味着您无法以这种方式访问​​它们，因此您必须将优化：false，传递给标记选项，然后访问该标记。

  const markerlayer = new google.maps.OverlayView（）; 
 markerlayer.draw = function（）{
 this.getPanes（）。markerLayer.classList.add（'marker-layer'）; 
}; 
 markerlayer.setMap（map）; 
  

I want to add a pulse animation like this to my existing markers on a checkbox click, how can I do this?

解决方案

It's not as easy as you it seems it ought to be. I've just been doing this exact same thing and have had some success.

The most straightforward way is to use an animated gif as your marker.

If you want to do a CSS animation and are a bit more comfortable with JS you can add a wrapper around all your makers using the code below (after adding all your markers. It creates a new overlay to the marker pane and gives that a class of .marker-layer.

One problem with this is that Google Maps tries to render icons using canvas if it can, which means you don't have access to them in this way. You therefore have to pass optimized: false, to the marker options to then get access to the marker.

const markerlayer = new google.maps.OverlayView();
markerlayer.draw = function () {
    this.getPanes().markerLayer.classList.add('marker-layer');
};
markerlayer.setMap(map);

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