谷歌地图标记 labelClass 动画无法正常工作答案

【问题标题】：Google maps markers labelClass animation not working properly谷歌地图标记 labelClass 动画无法正常工作
【发布时间】：2015-10-25 20:41:31
【问题描述】：

我正在处理this project。我有一个angular-google-map 指令。我正在用 labelClass 覆盖默认标记。 CSS 工作正常，但不悬停。

.marker {
    color: white;
    border: 2px white solid;
    border-radius: 50px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.marker:hover {
    background-color: #C52183;
    animation: pulse 1s;
}

/* ANIMATIONS */
@keyframes pulse {
  50% {

    transform: scale(4);
  }

  100% {

    transform: scale(1);
  }
}

如果您查看示例，您可以看到动画，但不是真实颜色。我有时会得到真正的动画。完整的项目是here。

pd：问题不可能是动画，如果我只是尝试更改一些 css 属性我没有效果，所以我认为问题出在谷歌地图和 css 上。

【问题讨论】：

标签： angularjs google-maps angular-google-maps

【解决方案1】：

我终于修复了这个“错误”。

问题出在 MarkerWithLabel 库上，但实际上不是错误，只是不可能（使用此库）。检查我们看到的库：

  // Set up the DIV for handling mouse events in the label. This DIV forms a transparent veil
  // in the "overlayMouseTarget" pane, a veil that covers just the label. This is done so that
  // events can be captured even if the label is in the shadow of a google.maps.InfoWindow.
  // Code is included here to ensure the veil is always exactly the same size as the label.
  this.eventDiv_ = document.createElement("div");
  this.eventDiv_.style.cssText = this.labelDiv_.style.cssText;

我刚刚修改了库，所以我不再创建不可见的 div，并且我拦截了带有真实标签的事件。现在它符合我的要求。