Google Maps API v3：infowindow的自定义样式
我已经尝试了很多来自Google Maps参考和其他stackoverflow问题的示例，但是我一直无法在我的infowindow上获得自定义样式。
我正在使用一些非常相似的东西在这个其他的stackoverflow答案
这里是工作/可编辑： http : //jsfiddle.net/3VMPL/
特别是，我想有方形的angular落，而不是四舍五入。
更新 ：参考这个答案的信息源代码迁移到github的状态。
如何使用Infobox插件，而不是使用通常的Infowindow？ 我在这里提供了一个完整的例子。 信息框的主要内容是你可以在你的页面的html中创build你的信息框，让你完全控制它如何使用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 = 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的灵活性， 这个jsfiddle将一个带有css转换的图像作为“信息框”。
最后一个提示： 不要在html中使用“infobox”类。 这实际上是生成信息框时插件的使用情况。
如果你不能使用信息框，并需要自定义infowindow，你可以使用CSS访问它。 这不是很漂亮，首先严重依赖：孩子/最后：孩子selectselect器，显然是否谷歌决定改变他们的地图HTML结构。
希望下面的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; }
您可以通过样式化.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; } } }
我想要在Google地图标记点击上popup一个透明的联系表单。 我终于用信息框插件和这篇文章的帮助。 这就是我所做的。
任何人都可以从这里下载和使用源代码
