Question

我正在尝试使用gridstack.js将地图窗口小部件添加到我制作的仪表板中。示例小部件如下所示：

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

以下是将地图添加到相关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;
}

Answer 1

通常，您将Google地图嵌入div中并设置div的大小。

当地图呈现时，它会显示一个符合该div大小的Iframe。

确保您在div上设置了尺寸。如果是因为div太小，你可以尝试在div上设置'overflow：hidden'。

如果这不起作用，请打开Web开发人员控制台并查看样式。打开/关闭样式和/或添加新样式，直到您可以应用CSS规则来阻止它过度流动。

谷歌地图溢出到外部分区

1 个答案: