Question

我在这样的div结构中有一个谷歌地图：

<div style="width:100%;height:100%;">
    <div id="divLeft" style="float:left;width:445px;height:100%;position:relative;overflow-y:scroll;overflow-x:hidden">
    <div id="divRight" style="float:left;width:75%;position:relative">
         <input id="searchTextField" type="text" />
         <div id="map-canvas" style="width:100%;height:100%"></div>
    </div>
</div>

map-canvas div是实际的地图。

所有这一切都正常，直到我开始调整浏览器窗口的大小以使其变小。或者即使窗口开始太小。谷歌地图完全消失。当地图消失时，我已经确定了窗口的确切像素宽度。在1335像素宽度或更大，地图就在那里。在1334像素宽度或更小时，它消失了。请注意divRight的初始宽度（map-canvas的div容器）从75％开始。这似乎是错误的和随意的，但我能发现的一切都有效。任何更高的％和地图从一开始就消失了。窗口高度可以是任何东西，地图很好。它只是导致它消失的宽度。 divLeft需要固定宽度为445像素，但我希望divRight和map-canvas填充剩余窗口空间的100％。

这似乎无法解决问题：

$(window).resize(function() {
    google.maps.event.trigger(map, "resize");
});

此外，我尝试使用jquery动态调整大小特技，但没有成功：

$(window).resize(function() {
    $("#map-canvas").css("width", $("#divRight").width());
    $("#map-canvas").css("height", $("#divRight").height());
    google.maps.event.trigger(map, "resize");
});

这是一个简化的web page showing the problem。如果您无法在右侧div中看到谷歌地图，只是一堆空格，那么您的浏览器窗口宽度将窄于1335像素。不知道那个宽度有什么特别之处。

为什么谷歌地图想要以一定宽度消失，我该如何解决这个问题？

Answer 1

问题是在断点处，右窗格的75％宽度大于窗口宽度减去左窗格的445像素。

因此，由于车身高度为100％并且溢出隐藏，浮动物被向下推并且不可见。

作为快速测试，请将左窗格宽度设置为25％，并始终显示地图。

<强>结论：

您的调整大小代码正在解决错误的元素。它应该检查#divRight宽度适合窗口

当容器div缩小时，谷歌地图消失

1 个答案: