Google Maps API v3:信息窗口的自定义样式 [英] Google Maps API v3: Custom styles for infowindow

问题描述

我已经尝试了 google maps 参考和其他 stackoverflow 问题中的许多示例，但我无法在我的信息窗口中获得自定义样式.

我使用的东西与之前的做法非常相似 在另一个 stackoverflow 答案中

这里工作/可http://jsfiddle.net/3VMPL/

特别是，我想要方角而不是圆角.

解决方案

更新:参考这个答案 为 infobox 源代码迁移到 github 的状态.

<小时>

如何使用 Infobox 插件而不是使用通常的 Infowindow?我在 jsfiddle example here 中提供了一个完整的示例.信息框的主要内容是您可以在页面的 html 中创建信息框，让您可以完全控制使用 css(以及一些 javascript 选项，如有必要)的外观.这是信息框的 html:

<div id="infobox1">Infobox 非常容易定制，因为它是您的代码

这里的想法是 "infobox-wrapper" div 将被隐藏(即，在你的 css 中显示:none)然后在你的 javascript 中你将初始化一个 Infobox 对象并给它一个引用到你的信息框"(在隐藏的包装内)像这样:

infobox = new InfoBox({内容:document.getElementById("infobox1"),disableAutoPan:假，最大宽度:150，pixelOffset: 新的 google.maps.Size(-140, 0),zIndex:空，框样式:{背景:网址('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif')不重复"，不透明度:0.75，宽度:280px"},closeBoxMargin: "12px 4px 2px 2px",closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",infoBoxClearance:新的 google.maps.Size(1, 1)});

这只是一些可用选项的示例.唯一需要的键是 content - 对信息框的引用.

并打开信息窗口:

google.maps.event.addListener(marker, 'click', function() {infobox.open(map, this);map.panTo(loc);});

为了进一步展示 InfoBox 的灵活性，这个 jsfiddle 有一个带有 css 的图像转换为信息框".

最后一个提示:不要在您的 html 中使用信息框"类. 不幸的是，在实际生成信息框时插件使用了它.

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:信息窗口的自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！