如何从 google 地图信息 window 弹出窗口中删除关闭按钮 (x) 边框？

Question

有什么方法可以消除 google 地图信息 windows 上关闭 (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;}

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

Answer 1

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

outline: none

border-radius: 0

Answer 2

基于Infowindow documentation：

The InfoWindow class does not offer customization.

我建议您使用 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 密钥。

Answer 3

试试这个，在 InfoWindow 的旁边。

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

Answer 4

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

.gm-style-iw button:focus {
    outline: 0;
}

如何从 google 地图信息 window 弹出窗口中删除关闭按钮 (x) 边框？

How to remove close button (x) border from google maps info window pop up?

javascript

google-maps

infowindow

google-maps-markers