Google Maps InfoWindow，使用 jQuery 撤消子元素的样式

Question

亲爱的 Stackoverflowers，你好！

像许多其他 InfoWindow 线程一样，我正在寻找一种自定义 InfoWindow 的方法。
注意：我不能简单地使用 infobubble 和 infobox 有技术原因！

我通过本指南遇到了一个相当僵硬的解决方案： http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html（希望链接永远不会消失，您可以从演示按钮旁边的下载按钮下载示例）

它的作用是“删除” infowindowcontent 的外部内容，这正是我想要的。但它远不止于此，每当我点击我的标记并弹出信息窗口时，它都会为地图上的所有其他信息窗口设置相同的样式。

function customizeInfoWindow(infowindow) {
    google.maps.event.addListener(infowindow, 'domready', function () {
        var iwOuter = $('.gm-style-iw');
        var iwBackground = iwOuter.prev();

        iwBackground.children(':nth-child(2)').css({ 'display': 'none' }); // Removes BoxShadow
        iwBackground.children(':nth-child(4)').css({ 'display': 'none' }); // Removes WhiteBox
    });
}

据我所知，这是我从 InfoWindow 中删除外部内容的唯一真正选择。尽管如此，我选择了这个选项。通过定制，我得到了我想要的，但是一些不需要的功能伴随着这个“修复”。

现在我正在尝试通过在关闭信息窗口时恢复样式来解决此问题（单击地图上的其他位置）。我正在尝试这样的事情：

function undoCustomization(map) {
    google.maps.event.addListener(map, 'domready', function () {
        var iwOuter = $('.gm-style-iw');
        var iwBackground = iwOuter.prev();

        iwBackground.children(':nth-child(2)').css({ 'display': 'block' }); // Add BoxShadow
        iwBackground.children(':nth-child(4)').css({ 'display': 'block' }); // Add WhiteBox

    });
}

但这似乎不起作用。有人对我如何从这里进步有一些建议吗？

Answer 1

我强烈建议不要对 Infowindow 本身的 DOM 结构做出任何假设。 API 不保证 Infowindow 的组成方式，类名、元素层次结构和 CSS 样式等内容随时可能发生变化。如果您走这条路，您的解决方案很可能会在未来某个时候停止工作而不会发出警告。

如果您想使用 Infowindow 的外观，自定义 infowindow 实现是一个更好的主意。请参阅 Google Maps: How to create a custom InfoWindow? 了解从哪里开始的一些想法。