Question

亲爱的Stackoverflowers你好！

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

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

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

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

现在我正在尝试通过在关闭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的外观，自定义信息窗实现是一个更好的主意。有关从哪里开始的一些想法，请参阅Google Maps: How to create a custom InfoWindow?。

Google Maps InfoWindow，使用jQuery撤消childelements上的样式

1 个答案: