GMaps V3 InfoWindow - 禁用关闭"x"按钮

Question

从我看到的,在GMaps的v2中,有一个InfoWindow对象的属性"按钮",可以用给定InfoWindow没有关闭按钮的方式定义:

marker.openInfoWindowHtml("No Close Button",{buttons:{close:{show:4}}});

但上述内容不适用于v3.有人知道这样做的方法吗？我读到了一个替代InfoWindow的实用工具,名为InfoBox,但它在过去的两年里还没有开发出来.我目前正在使用最新的3.13版本的Gmaps v3 API.

如果没有更好的解决方案,可以使用jQuery解决方法.

Answer 1

你也可以通过CSS来做到这一点.

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

正如@antmeehan在评论中所说,编辑2019年1月

谷歌已经改变了HTML,关闭按钮现在是一个按钮元素而不是div

所以隐藏"x"按钮的css代码现在是:

.gm-style-iw + button {display: none;}

Answer 2

更新

显示<div>在谷歌地图的顶部是直截了当:

示例css

div.info {
    position: absolute;
    z-index: 999;
    width: 200px;
    height: 100px;
    display: none;
    background-color: #fff;
    border: 3px solid #ebebeb;
    padding: 10px;
}

一info类<div>某处标记:

<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div>

总是很高兴有一个对div的简短引用:

var info = document.getElementById('myinfo');

更棘手的部分,显示<div>,如何以及何时 - 这里我只是将一个点击处理程序分配给地图(在创建之后)并<div>在地图内的鼠标位置XY处显示信息:

google.maps.event.addListener(map, 'click', function(args) {
  var x=args.pixel.x; //we clicked here
  var y=args.pixel.y;

  info.style.left=x+'px';
  info.style.top=y+'px';
  info.style.display='block';
});

你得到的是<div>,每次点击时,信息都会在地图上跟随你.

• 你将需要更多的样式,以满足你的需要,例如它"看起来像一个InfoBox",但这应该很容易找到,我不是一个图书管理员:)
• 也许以后可能会关闭信息,但你不想在第一时间:)

原始答案

你不能!在当前的v3.13 InfoWindow选项中无法执行此操作.

解决方法是禁用包含X的图像:

<style>
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
    display: none;
}
</style>

但这绝不是可行的!

src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png就是今天 infowindow所指的东西.明天,或在一个月或一年内,这个图像参考肯定已经改变.正如你所看到的,如果你搜索类似的"解决方案",随着时间的推移 - 就像这样.它们今天都被打破了,例如努力毫无意义.

我认为谷歌"拒绝"遵循隐藏关闭按钮的请求有非常好的逻辑.如果您不需要关闭按钮,那么您还需要InfoWindow？当你最好只是为了<div>在地图上显示一个.

Answer 3

如果使用jquery只需添加此项

$(".gm-style-iw").next("div").hide();

Answer 4

要扩展Louis Moore的答案,您还可以在删除关闭按钮后居中文本:

.gm-style-iw + div {display: none;}
.gm-style-iw {text-align:center;}

没有居中:

中心:

Answer 5

谢谢Tushar,但您还需要将此代码放在事件处理程序中

google.maps.event.addListener(infowindow, 'domready', function(){
    $(".gm-style-iw").next("div").hide();
});
    

Answer 6

我使用了Tushar Gaurav给出的答案,但稍稍扩展了一下......

$(".gm-style-iw:contains(" + infoText + ")").css("left", function() {
    return ($(this).parent().width() - $(this).width()) / 2;
}).next("div").remove();

这将删除带有文本输入的infowindow中的X infoText,然后在删除关闭按钮后重新显示文本,因为它偏离中心.

只是为我偶然发现这个页面的其他人添加这个.

Answer 7

closeBoxURL: ""

如前所述,不适用于InfoWIndow.这是InfoBox上的一个选项.

例如,您可以使用此CSS解决方法来删除X和周围的可单击按钮:

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

正如达维德拉德所说.这是代码的解决方法,就像现在一样.它可能会改变.

Answer 8

应该.gm-style-iw > button避免我们在框中可能有的其他自定义按钮也被隐藏：

.gm-style-iw > button {
  display: none !important;
}