如何从弹出的Google地图信息窗口中删除关闭按钮(x)边框?

时间:2019-03-03 02:30:47

标签: javascript google-maps google-maps-markers infowindow

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

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

3 个答案:

答案 0 :(得分:0)

现在,屏幕快照中的x周围似乎有很多填充。我将检查该元素,并查看父元素或相关类中是否有任何样式可以覆盖您对其边界或轮廓所做的更改。如果没有,您是否尝试过以下选择器?

outline: none

border-radius: 0

答案 1 :(得分:0)

基于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密钥。

答案 2 :(得分:0)

在 InfoWindow 旁边试试这个。

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