我尝试了google地图参考和其他stackoverflow问题中的许多示例,但我无法在我的信息窗口获得自定义样式。
我使用的内容非常类似in this other stackoverflow answer
这是工作/可编辑的:http://jsfiddle.net/3VMPL/
特别是,我希望有方角而不是圆角。
答案 0 :(得分:118)
更新:有关信息框源代码迁移到github的状态,请参阅this answer。
如何使用Infobox插件而不是使用通常的Infowindow?我在jsfiddle example here中提出了一个完整的例子。关于信息框的主要内容是你可以在你的页面的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>
这里的想法是隐藏"infobox-wrapper"
div(即显示:你的css中没有)然后在你的javascript中你将初始化一个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)
});
这只是一些可用选项的示例。唯一需要的密钥是content
- 对信息框的引用。
打开信息窗口:
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, this);
map.panTo(loc);
});
为了进一步展示InfoBox的灵活性,this jsfiddle将带有css过渡的图像作为“信息框”。
最后一个提示:不要在你的html中使用“infobox”类。当信息框实际生成时,插件使用它是不幸的。
答案 1 :(得分:29)
如果您无法使用信息框并需要自定义信息窗口,则可以使用css访问它。 它并不漂亮,严重依赖于第一个:child / last:child psuedo选择器,显然是谷歌是否决定改变他们的地图html结构。
希望下面的CSS可以帮助其他人在被迫处理信息时遇到困难。
/* 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;
}
答案 2 :(得分:2)
您可以通过设置.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;
}
}
}
&#13;
答案 3 :(得分:1)
我希望在Google地图标记点击上有一个透明的联系表单弹出窗口。我最后在信息块插件和this post的帮助下完成了它。 That's what我做了。
任何人都可以从here
下载和使用来源