我正在尝试将地图小部件添加到使用 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-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;
}