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

Question

你好亲爱的 Stackoverflowers!

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

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

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

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 中删除外部内容是我唯一真正的选择。对此，我选择了这个选项。通过定制，我得到了我想要的东西，但一些不需要的功能伴随着这个“修复”而来。

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

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

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

如果您想玩转信息窗口的外观，自定义信息窗口实现是一个更好的主意。参见 Google Maps: How to create a custom InfoWindow?了解从哪里开始的一些想法。