jQuery GMaps V3 InfoWindow - 禁用关闭“x”按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18933367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
GMaps V3 InfoWindow - disable the close "x" button
提问by ddinchev
From what I see, in v2 of GMaps API there was a property "buttons" of the InfoWindow object that one could define in a way that given InfoWindow has no close button:
从我所见，在 GMaps API 的 v2 中有一个 InfoWindow 对象的属性“按钮”，可以以给定 InfoWindow 没有关闭按钮的方式定义它：
marker.openInfoWindowHtml("No Close Button",{buttons:{close:{show:4}}});
The above however does not apply for v3. Does anybody know a way to do it? I read about an utility that replaces InfoWindow called InfoBoxbut it has not been developed for the past 2 years. I'm currently using the latest 3.13 version of Gmaps v3 API.
然而，以上不适用于 v3。有人知道这样做的方法吗？我读到了一个名为InfoBox 的替代 InfoWindow 的实用程序，但它在过去 2 年中一直没有被开发出来。我目前使用的是最新的 3.13 版 Gmaps v3 API。
A workaround with jQuery is acceptable, if there is no better solution.
如果没有更好的解决方案，使用 jQuery 的解决方法是可以接受的。
采纳答案by davidkonrad
Update
更新
Displaying a <div>on top of a google map is straight forward :
<div>在谷歌地图上显示 a很简单：
example css
示例CSS
div.info {
position: absolute;
z-index: 999;
width: 200px;
height: 100px;
display: none;
background-color: #fff;
border: 3px solid #ebebeb;
padding: 10px;
}
A infoclass <div>somewhere in the markup :
标记中某处的info类<div>：
<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div>
Always nice to have a short reference to the div :
对 div 有一个简短的引用总是很高兴：
var info = document.getElementById('myinfo');
The more tricky part, showing the <div>, how and when - here I just assign a click handler to the map (after it is created) and show the info <div>at mouse location XY inside the map :
更棘手的部分，显示<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';
});
What you gain with this is, that the info <div>follows you around on the map, every time you click.
这样做的好处是<div>，每次单击时，信息都会在地图上跟随您。
- You will need more styling so it suits your need, eg so it "looks like an InfoBox", but that should be easy to find out, I am not a librarian :)
- And maybe later on something to close the info with, but that you didn't want in the first place :)
- 您将需要更多样式以使其适合您的需要，例如使其“看起来像一个信息框”，但这应该很容易找到，我不是图书管理员 :)
- 也许稍后可以关闭信息，但您一开始并不想要:)
Original answer
原答案
You cant! There is no way to do this in the current v3.13 InfoWindow options.
你不能！在当前的 v3.13 InfoWindow 选项中没有办法做到这一点。
A workaround is to disable the image containing the X :
解决方法是禁用包含 X 的图像：
<style>
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
display: none;
}
</style>
But this is in no wayadviceable!
但这绝不是可建议的！
src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.pngis just what the infowindow is refering to today. Tomorrow, or in a month, or in a year, this image-reference for sure has changed. As you can see if you search for similar "solutions", made over time - like this. They are all broken today, eg the effort is meaningless.
src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png这正是今天信息窗口所指的内容。明天，或者一个月，或者一年，这个图像参考肯定会改变。正如你所看到的，如果你搜索类似的“解决方案”，随着时间的推移 - 像这样。他们今天都坏了，例如努力是没有意义的。
I think there is extremely good logic in google "refusing" to follow the request for hiding the close-button. If you not need a close-button, what do you need an InfoWindow for anyway? When you are better off just to show a <div>on the map.
我认为谷歌“拒绝”遵循隐藏关闭按钮的请求是非常好的逻辑。如果您不需要关闭按钮，那么您还需要 InfoWindow 做什么？当你最好只是<div>在地图上显示一个。
回答by Louis Moore
You can also do it through the css.
您也可以通过 css 来完成。
.gm-style-iw + div {display: none;}
edit january 2019
as @antmeehan said in the comment,
正如@antmeehan 在评论中所说，编辑 2019 年 1 月，
Google have changed the HTML, and the close button is now a button element rather than a div
Google 更改了 HTML，关闭按钮现在是按钮元素而不是 div
So the css code to hide the "x" button is now:
所以隐藏“x”按钮的css代码现在是：
.gm-style-iw + button {display: none;}
回答by Tushar Gaurav
if using jquery just add this
如果使用 jquery 只需添加这个
$(".gm-style-iw").next("div").hide();
回答by phi
To extend on Louis Moore's answer, you can also center the text after removing the close button:
要扩展Louis Moore的答案，您还可以在删除关闭按钮后将文本居中：
.gm-style-iw + div {display: none;}
.gm-style-iw {text-align:center;}
Without Centering:
不居中：
With Centering:
带定心：
回答by CarryLight
Thanks Tushar, but also you need put this code in event handler
谢谢 Tushar，但您也需要将此代码放在事件处理程序中
google.maps.event.addListener(infowindow, 'domready', function(){
$(".gm-style-iw").next("div").hide();
});
回答by Reinstate Monica Cellio
I used the answer given by Tushar Gaurav, but expanded it a little...
我使用了 Tushar Gaurav 给出的答案，但将其扩展了一点......
$(".gm-style-iw:contains(" + infoText + ")").css("left", function() {
return ($(this).parent().width() - $(this).width()) / 2;
}).next("div").remove();
That will remove the X from an infowindow with the text in infoText, and then recenter the text as it's off-center after removing the close button.
这将从信息窗口中删除 X 中的文本infoText，然后在删除关闭按钮后将文本重新居中，因为它偏离中心。
Just adding this for anyone else who stumbles across this page as I did.
只需为像我一样偶然发现此页面的其他人添加此内容。
回答by tmn
closeBoxURL: ""
as stated before doesn't apply for InfoWIndow. This is an option on the InfoBox.
如前所述不适用于InfoWINdow。这是InfoBox上的一个选项。
You may for example use this CSS workaround to remove the X, and the surrounding clickable button:
例如，您可以使用此 CSS 解决方法来删除 X 和周围的可点击按钮：
.gm-style-iw + div {
display: none;
}
And as davidkonradsaid. This is a workaround on the code as it is today. It will likely be changed.
正如大卫康拉德所说。这是对代码的一种解决方法，就像今天一样。它很可能会改变。
回答by alex
My own way (without Jquery) and with realign to the center of the infoWindow:
我自己的方式（没有 Jquery）并重新对齐到 infoWindow 的中心：
var content = document.querySelector('.gm-style-iw');
content.parentNode.removeChild(content.nextElementSibling);
content.style.setProperty('width', 'auto', 'important');
content.style.setProperty('right', content.style.left, 'important');
content.style.setProperty('text-align', 'center', 'important');
回答by rob.m
It should be .gm-style-iw > buttonto avoid other custom buttons we might have within the box to be hidden too:
应该.gm-style-iw > button避免我们在框中可能有的其他自定义按钮也被隐藏：
.gm-style-iw > button {
display: none !important;
}
回答by Ryan Irilli
This works
这有效
.gm-style-iw > button {display: none !important;}
