Google Maps API v3：infowindow的自定义样式 [英] Google Maps API v3: Custom styles for infowindow

问题描述

我已经尝试了很多来自Google地图引用和其他stackoverflow问题的示例，但我无法在我的infowindow上获得自定义样式。

我使用的内容与所做的内容非常相似在这个其他stackoverflow答案

这里它工作/可编辑： http://jsfiddle.net/3VMPL/

特别是，我想要有方形的角而不是圆角。 / bb
$ b

---

如何使用Infobox插件而不是使用通常的Infowindow？我在 jsfiddle示例中提供了一个完整的示例。信息框的主要内容是您可以在页面的html中创建信息框，从而完全控制它如何使用CSS（以及一些JavaScript选项，如果需要）。这里是信息框的html：

 < div class =infobox-wrapper> 
< div id =infobox1> 
 Infobox非常易于定制，因为它是您的代码
< / div> 
< / div> 
  

这里的想法是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/zh-CN/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类。实际生成信息框时，插件会使用它。

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.

I am using something very similar to what was done in this other stackoverflow answer

Here it is working/editable: http://jsfiddle.net/3VMPL/

In particular, I would like to have square corners instead of the rounded.

解决方案

Update: Refer to this answer for the state of the infobox source code migration to 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:

<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 = 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.

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 jsfiddle has an image with a css transition as the "info box".

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.

这篇关于Google Maps API v3：infowindow的自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！