css - 为什么谷歌地图覆盖了我的 div 标签

Question

我在谷歌地图所在的位置创建了一个名为“map-canvas”的 div 标签。在我的样式表中，我将位置设置为固定，但是当我打开浏览器并检查时，我看到谷歌地图已经用它自己的样式覆盖了我的样式，并将位置固定更改为position:relative。为什么？我怎样才能覆盖谷歌这样做？我尝试将样式属性放在标签中，但谷歌仍然覆盖了这些值。

之前

#map-canvas {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 40%;
height: 900px;
background-color: pink;
/* border: 3px solid black; */
}

之后

element.style {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0px);
background-color: rgb(229, 227, 223);
}

Answer 1

当您调用 new google.maps.Map(element) 时，Google 会对该 element 做任何它想做的事情。而是将谷歌地图附加到您的样式元素中的元素:

CSS:

#map-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 40%;
height: 900px;
background-color: pink;
/* border: 3px solid black; */
}

html:

<div id="map-container">
  <div id="map-canvas">
  </div>
</div>