Javascript Google Maps API v3：信息窗口的自定义样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7616666/
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
Google Maps API v3: Custom styles for infowindow
提问by CloudMagick
I've tried many of the examples from the google maps reference and from other stackoverflow questions, but I haven't been able to get custom styles on my infowindow.
我已经尝试了 google maps 参考和其他 stackoverflow 问题中的许多示例，但是我无法在我的信息窗口上获得自定义样式。
I am using something very similar to what was done in this other stackoverflow answer
我使用的东西与其他 stackoverflow 答案中所做的非常相似
Here it is working/editable: http://jsfiddle.net/3VMPL/
这是工作/可编辑：http: //jsfiddle.net/3VMPL/
In particular, I would like to have square corners instead of the rounded.
特别是，我想要方角而不是圆角。
回答by DonVaughn
Update: Refer to this answerfor the state of the infobox source code migration to github.
更新：有关信息框源代码迁移到 github 的状态，请参阅此答案。
How about using the Infobox plugin rather than using the usual Infowindow? I put up a complete example in a jsfiddle example here. The main thing about the infobox is that you can create your infobox within your page's html, giving you complete control over how it looks using css (and some javascript options, if necessary). Here's the html for the infobox:
使用 Infobox 插件而不是通常的 Infowindow 怎么样？我在这里的jsfiddle 示例中提供了一个完整的示例。信息框的主要内容是您可以在页面的 html 中创建信息框，让您可以完全控制使用 css（以及一些 javascript 选项，如有必要）的外观。这是信息框的 html：
<div class="infobox-wrapper">
<div id="infobox1">
Infobox is very easy to customize because, well, it's your code
</div>
</div>
The idea here is the "infobox-wrapper"div will be hidden (i.e., display:none in your css) and then in your javascript you will initialize an Infobox object and give it a reference to your "infobox" (inside the hidden wrapper) like so:
这里的想法是"infobox-wrapper"div 将被隐藏（即 display:none 在你的 css 中），然后在你的 javascript 中你将初始化一个 Infobox 对象并给它一个对你的“infobox”（在隐藏的包装器内）的引用，如下所示：
infobox = new InfoBox({
content: document.getElementById("infobox1"),
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
This is just an example of some of the available options. The only required key is content- the reference to the infobox.
这只是一些可用选项的示例。唯一需要的键是content- 对信息框的引用。
And to open the info window:
并打开信息窗口：
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, this);
map.panTo(loc);
});
And to further demonstrate the flexibility of the InfoBox, this jsfiddlehas an image with a css transition as the "info box".
为了进一步展示 InfoBox 的灵活性，这个 jsfiddle有一个带有 css 过渡的图像作为“信息框”。
And one final tip: Don't use the class "infobox" in your html.It is rather unfortunately used by the plugin when the infobox is actually generated.
最后一个提示：不要在 html 中使用“信息框”类。不幸的是，当实际生成信息框时，插件使用了它。
回答by giftlistmonkey
If you can't use infobox and need to customise the infowindow you can access it using css. It's not pretty, relies heavily on first:child/last:child psuedo selectors and obviously on whether google ever decides to change their map html structure.
如果您不能使用信息框并且需要自定义信息窗口，您可以使用 css 访问它。它并不漂亮，严重依赖于 first:child/last:child 伪选择器，并且显然取决于 google 是否决定更改其地图 html 结构。
Hopefully the below css can help someone else out in a bind when they're forced to deal with infowindow.
希望下面的 css 可以帮助其他人在被迫处理 infowindow 时陷入困境。
/* white background and box outline */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div
{
/* we have to use !important because we are overwritng inline styles */
background-color: transparent !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
}
/* arrow colour */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div > div > div
{
background-color: #003366 !important;
}
/* close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child
{
margin-right: 5px;
margin-top: 5px;
}
/* image icon inside close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child > img
{
display: none;
}
/* positioning of infowindow */
.gm-style-iw
{
top: 22px !important;
left: 22px !important;
}
回答by Ivan Proskuryakov
You can style the infoWindow by styling the .gm-style-iwclass.
您可以通过为.gm-style-iw类设置样式来设置 infoWindow 的样式。
#map-canvas {
.gm-style {
> div:first-child > div + div > div:last-child > div > div {
&:first-child > div,
&:first-child > div > div > div,
&:last-child,
&:last-child > img {
display: none !important;
}
}
.gm-style-iw {
top: 20px !important;
left: 130px !important;
background: #fff;
padding: 10px;
height: 40px;
}
}
}