在应用自定义样式之前隐藏InfoWindow

Question

我正在使用Google Maps API InfoWindow，并且正在通过javascript设置自定义类。

 this.infoWindow.addEventListener("domready", this.handleContentReady);

 handleContentReady = () => {
   document.getElementsByClassName("gm-style-iw")[0]
     .parentElement
     .classList
     .add("custom-iw")
 }

问题在于，当首次加载infoWindow时，它还没有自定义样式，因此它会从默认样式跳到我的自定义样式

是否可以在应用自定义样式之前隐藏infoWindow？

Answer 1

好的，我找到了答案

解决方案是在打开窗口之前将infoWindow的pixelOffset设置为地图外部

this.infoWindow.setOptions({ pixelOffset: new google.maps.Size(0, 2000) })
this.infoWindow.open(this.props.mapInstance, this.props.marker);

并在内容准备好后重新设置

handleContentReady = () => {
  document.getElementsByClassName("gm-style-iw")[0]
    .parentElement
    .classList
    .add("custom-iw")
  this.infoWindow.setOptions({ pixelOffset: new google.maps.Size(0, 0) })
}

Answer 2

我将使用CSS扩展 gm-style-iw

的样式

.gm-style-iw {
  visibility: hidden;
}

然后 custom-iw

.custom-iw {
  visibility: visible;
}

将添加 custom-iw 类，它将覆盖 gm-style-iw 中的可见性。