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

-1

我已将此代码复制到我的网站添加一个基本的谷歌地图，它的工作正常 https://jsfiddle.net/qed5a8hc/ 我添加了我自己的API密钥。但是，标记没有显示。看来，这个片段在我的CSS文件，防止它显示，因为当我注释掉，标记通过添加CSS谷歌地图标记不显示，因为边框

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

显示出来

* { 
    box-sizing: border-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>

来源

2017-08-05 anna

你发布的小提琴绝对没有什么。 –

哦，不好意思...这里是我使用的代码 - https://developers.google.com/maps/documentation/javascript/adding-a-google-map - 小提琴链接有 – anna

当我添加你的'*'统治谷歌的小提琴，它仍然正常工作。请拨弄他们的小提琴并制作一个包含您的CSS规则的版本，但实际上会失败。 –

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

* { 
    box-sizing: border-box; 
}

的片段具有这样的：

* { 
    max-width: 100%; 
}

但不管。正如您所描述的，片段中的规则确实会破坏地图标记。

这个底线很简单：

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

这也适用于任何类似的嵌入式小部件，除非小部件位于iframe之内。找到另一种方法来做任何你试图用*规则的样式。地图API或其他小部件难以抵御像这样的CSS样式。

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

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

如果你把地图放在iframe里面，那么一切都会改变。该地图位于其独立的网页中，不受主页面上的CSS限制。如果您必须使用*规则，那么iframe对您来说可能是一个很好的解决方法。

来源

2017-08-05 23:04:31

谢谢你的解释！我正在使用网格系统，* CSS规则会阻止网格溢出的图像和事物，但我想我会为此页面找到解决方法。 – anna

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

回答

相关问题