谷歌地图标记不显示，因为边框框

Question

我已经复制了这段代码，将基本的谷歌地图添加到我的网站，它工作正常 https://jsfiddle.net/qed5a8hc/我添加了自己的 API 密钥。但是，标记未显示。似乎我的css文件中的这个片段阻止了它的显示，因为当我注释掉它时，标记出现了

* {
box-sizing: border-box; 
}

我尝试通过添加 css 来解决这个问题

#map {
box-sizing: content-box;
}

而且它不起作用。

代码片段：

function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}

* {
max-width: 100%; 
}
#map {
height: 400px;
width: 100%;
}

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

Answer 1

感谢您添加代码片段。我注意到代码段中的*规则与原始问题中的规则不同。问题列出了这个：

* {
box-sizing: border-box; 
}

该代码段如下所示：

* {
max-width: 100%; 
}

但无论如何。代码段中的规则确实会破坏您描述的地图标记。

这方面的底线很简单：

请勿在包含 Google Maps API 地图的网页上使用任何*CSS 规则。

这也适用于任何类似类型的嵌入式小部件，除非该小部件位于iframe内。找到另一种方法来执行您尝试使用*规则进行的任何样式设置。Maps API 或其他小部件很难抵御这样的 CSS 样式。

*规则也可能导致性能问题。至少过去是这样;我最近没有检查过。

有几种方法可以将max-width仅应用于自己的元素，而不是#map元素，但是如果不了解有关文档结构的更多信息，则很难提出具体建议。

如果您将地图放在iframe中，那么一切都会改变。地图位于其单独的网页中，不受主页上的 CSS 的约束。如果必须使用*规则，则iframe可能是一个很好的解决方法。