Google 地图标记 labelClass 动画无法正常工作
Google maps markers labelClass animation not working properly
我正在处理 this project. I have an 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 属性我不会生效,所以我认为问题出在 google 地图和 css.
我终于解决了这个 "bug"。
问题出在 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 并且我还拦截了带有真实标签的事件。现在它在我的要求下工作。
我正在处理 this project. I have an 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 属性我不会生效,所以我认为问题出在 google 地图和 css.
我终于解决了这个 "bug"。
问题出在 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 并且我还拦截了带有真实标签的事件。现在它在我的要求下工作。