Google地图标记labelClass动画不能正常工作

我正在this project上工作。我有一个angular-google-map指令。我正在用labelClass覆盖默认标记。 CSS工作正常，但不会悬停。Google地图标记labelClass动画不能正常工作

.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。

来源

2015-10-19 Ivan Coronado

我终于修正了这个“bug”。

问题出在MarkerWithLabel库上，但实际上并不是一个bug，它只是一个不可能的事情（有了这个库）。检查我们看到了库：

// 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，也是我拦截与真正的标签事件。现在它在我的要求下工作。

Google地图标记labelClass动画不能正常工作

回答

相关问题