更新：有关信息框源代码迁移到 github 的状态，请参阅此答案。

使用 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>

这里的想法是"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)
});

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

并打开信息窗口：

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

为了进一步展示 InfoBox 的灵活性，这个 jsfiddle有一个带有 css 过渡的图像作为“信息框”。

最后一个提示：不要在 html 中使用“信息框”类。 不幸的是，当实际生成信息框时，插件会使用它。

如果您不能使用信息框并需要自定义信息窗口，您可以使用 css 访问它。它并不漂亮，严重依赖于 first:child/last:child 伪选择器，并且显然取决于 google 是否决定更改其地图 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;
}

我想在谷歌地图标记点击上有一个透明的联系表单弹出窗口。我终于在 infobox 插件和这篇文章的帮助下完成了它。那是我做的。

任何人都可以从这里下载和使用源代码

您可以通过为.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;
      }
    }
  }