vuejs Google 地图信息窗口 - 隐藏关闭图标

Question

我想知道如何隐藏/删除 google-map infoWindow 中的关闭图标。

我正在使用带有Gmap-vue 的vue-google-maps 端口的Vuejs

模板

<GmapMap
  ref="mapRef"
  :center="center"
  :zoom="12"
  :style="`height: ${mapSize.height}; width: ${mapSize.width};`"
  :options="mapOptions"
>
  <gmap-info-window
    v-for="(m, index) in markers"
    :key="index"
    :options="infoOptions"
    :position="m.position"
    :opened="showInfoWindow"
    @closeclick="infoWinOpen = false"
  >
    <info-window-content />
  </gmap-info-window>
</GmapMap>

努力

我尝试过使用 Css 来隐藏关闭图标。

.gm-ui-hover-effect {
  display: none !important;
}

或

button.gm-ui-hover-effect {
  visibility: hidden;
}

但仍然显示关闭的“x”图标。

Answer 1

我找到的解决方案是使用 Css ::v-deep 选择器

div ::v-deep .gm-ui-hover-effect {
  display: none !important;
}