谷歌地图溢出到外部div

Question

我正在尝试使用gridstack.js向仪表板添加地图小部件。示例小部件如下所示：

我想将地图添加到内部（白色）div中，但这样做会导致地图覆盖整个widget div，隐藏灰色边框和widget标题。为什么会发生这种情况，我该如何解决？

以下是将地图添加到相关div的代码：

function addMapToDiv(widgetID, flightPlanCoordinates) {
    var colCount = 0;
    var map = new google.maps.Map(document.getElementById(widgetID), {
        zoom: 1,
        center: { lat: 0, lng: -180 },
        mapTypeId: 'roadmap'
    });

    var colors = ["#FF0000", "#FFFF00", "#FF00FF", "#00FF00"];

    for (var key in flightPlanCoordinates) {
        var flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates[key],
            geodesic: true,
            strokeColor: colors[colCount],
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        colCount++;
        flightPath.setMap(map);
    }
}

编辑： HTML和CSS相当冗长。以下是必要的部分：

HTML：

<div id="widget_map0" style="display: flex;" onresize="resizeWidget(id)" ondrag="dragWidget()" data-gs-x="0" data-gs-y="66" data-gs-width="6" data-gs-height="6" class="grid-stack-item ui-draggable ui-resizable">
    <div class="grid-stack-item-content widget-background-color w3-round ui-draggable-handle">
        <span id="closewidget_map0" class="closebtn margin-right" data-toggle="tooltip" data-placement="top" title="Remove"><img src="img/delete.png"></span><span id="settingswidget_map0" class="settingsbtn margin-right" data-toggle="tooltip" data-placement="top" title="Settings"><img src="img/settings1.png"></span>
        <div class="w3-widget-content">
            <div class="widget-color">
                <p id="title_map0" class="chart-title-font">chart</p>
                <div id="map0" class="widget-color map-div" style="display: block; margin: 0px auto; height: 100%; position: relative; overflow: hidden;">
                    <!-- Map -->
                </div>
            </div>
        </div>
    </div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div>
    <div class="ui-resizable-handle ui-resizable-w" style="z-index: 90; display: block;"></div>
</div>

CSS：

.map-div {
    position: static !important;
    display: block; 
    margin: 0px auto; 
    height: 100%; 
    position: relative; 
    overflow: hidden;
}

- Ruwangi

---

请问您能分享一下您的 HTML 和 CSS 吗？ - kravisingh

Answer 1

通常情况下，您需要将谷歌地图嵌入到一个 div 中并设置 div 的大小。当地图渲染时，它会显示一个 iframe ，该 iframe 适应 div 的大小。

请确保在 div 上设置了大小。如果因为 div 太小而无法显示地图，则可以尝试在 div 上设置 'overflow:hidden'。

如果这样做仍然不起作用，请打开 web 开发者控制台并查看样式。切换样式开/关和/或添加新样式，直到您能够应用 CSS 规则以防止溢出。

- Alexander Higgins

---

"overflow:hidden" 已经在 div 上设置过了。现在给 div 设置一个尺寸，也没有起作用。 - Ruwangi

使用Web开发者控制台查看计算样式，可能会有些奇怪。尝试玩弄它们以应用CSS来防止溢出。 - Alexander Higgins

尝试以不同的方式更改样式 - 仍然无法工作。 :( - Ruwangi