Question

我正在使用MarkerWithLabel，以便我可以创建带有div的Google Maps标记，以获得有效的CSS动画等。

使用的能力：几乎在几个月前将标签悬停在MarkerWithLabel库中，但事件仅在标记的部分上注册，如您在此codepen中所见。

CSS
#container:hover { // Works but glitches
   opacity: 1.0;
}

JS
var marker = new MarkerWithLabel({
  position: myMap.getCenter(),
  map: myMap,
  opacity: 0.0,
  labelContent: "<div id=container>" +
  " <div id=largeDiv" +
    (a lot of code)
  "></div>" +
  " <div id=smallDiv" +
    (a lot of code)
  "></div>" +
  "</div>",
  labelAnchor: new google.maps.Point(width/2, height/2),
  labelClass: "labelClass" // the CSS class for the label
});

我做错了什么，或者此功能目前是否有问题？

Answer 1

这是导致问题的默认谷歌地图标记。有一个div位于您的标记所在的位置，它包含默认的谷歌地图标记，但它不可见，因为它的不透明度设置为0.但如果您将鼠标悬停在该区域上，您会注意到:hover样式不是'工作，它似乎有错误。

尝试将此应用于您的css：

.gmnoprint {display:none !important}

我也注意到你在css中的评论：

#largeDiv { // Nothing happens
  opacity: 0.3;
}
#smallDiv { // Nothing happens
  width: 10px;
  height: 10px;
}

没有任何反应，因为您在javascript中使用了内联样式，并且它们会覆盖您的CSS中的样式。

Google映射MarkerWithLabel CSS悬停效果故障

1 个答案: