Question

我已复制此代码，以便将基本的Google地图添加到我的网站，并且它运行正常 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可能是一个很好的解决方法。

Google地图标记因边框而无法显示

1 个答案: