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動畫不能正常工作

回答

相關問題