谷歌地图溢出到外层

Posted 2023-02-19

【中文标题】谷歌地图溢出到外层

【英文标题】：Google Map Overflows to Outer Div

【发布时间】：2017-12-27 01:30:29

【问题描述】：

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

我想将地图添加到内部（白色）div，但是当我这样做时，地图会显示覆盖整个小部件 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- data-gs- 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;

【问题讨论】：

能否分享您的HTML 和CSS。

【参考方案1】：

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

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

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

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

【讨论】：

'overflow:hidden' 已在 div 上设置。现在在 div 上设置一个大小，它也不起作用。

奇怪，使用 Web 开发者控制台查看计算的样式。看看你能不能和他们一起玩，应用 CSS 来阻止它溢出。

尝试以不同的方式更改样式 - 仍然不起作用。 :(