如何从弹出的谷歌地图信息窗口中删除关闭按钮（x）边框？

Posted 2023-03-28

【中文标题】如何从弹出的谷歌地图信息窗口中删除关闭按钮（x）边框？

【英文标题】：How to remove close button (x) border from google maps info window pop up?

【发布时间】：2019-07-24 16:35:32

【问题描述】：

有什么办法可以消除谷歌地图信息窗口上关闭 (x) 按钮周围的边框？ Screenshot.

我已经尝试了所有关于堆栈溢出的方法。

这不起作用：

.gm-style .gm-style-iw + div 
display: none; /* <-- this will generally work on the fly. */
visibility: hidden; /* this 2 lines below are just for hard hiding. :) */
opacity: 0;

这也不是：

.gm-style-iw + div display: none;

也许替换信息窗口中的图像是一种替代解决方案？有什么办法吗？

【问题讨论】：

你是用框架还是用JS改变样式？目前这似乎是一个 CSS/样式问题。

请提供一个minimal reproducible example 来证明您的问题。

【参考方案1】：

在我的例子中是按钮焦点，解决如下：

.gm-style-iw, button:focus 
    outline: 0;

【讨论】：

我猜你的意思是.gm-style-iw button:focus（没有，）。为我解决了它而无需重写现有的 JS

【参考方案2】：

基于Infowindow documentation：

InfoWindow 类不提供自定义功能。

我建议您使用customized popup，因为它在创建弹出窗口时不包含关闭按钮。

function Popup(position, content) 
this.position = position;

content.classList.add('popup-bubble');

// This zero-height div is positioned at the bottom of the bubble.
var bubbleAnchor = document.createElement('div');
bubbleAnchor.classList.add('popup-bubble-anchor');
bubbleAnchor.appendChild(content);

// This zero-height div is positioned at the bottom of the tip.
this.containerDiv = document.createElement('div');
this.containerDiv.classList.add('popup-container');
this.containerDiv.appendChild(bubbleAnchor);

// Optionally stop clicks, etc., from bubbling up to the map.
google.maps.OverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);

您可能会看到示例here

注意：请不要忘记在示例中添加您的 API 密钥。

【讨论】：

哇！太感谢了！我试试这个！

【参考方案3】：

现在屏幕截图中的 x 周围似乎有很多填充。我会检查元素，看看是否有来自父元素或相关类的样式覆盖了您对其边框或轮廓所做的更改。如果没有，您是否尝试过以下选择器？

outline: none

border-radius: 0

【参考方案4】：

在 InfoWindow 中试试这个。

<div style="position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; background-color: white; z-index: 2;"></div>