谷歌地图：初始化时屏幕上出现水平灰线答案

【问题标题】：Google Maps: Horizontal Grey Lines across the Screen when Initialized谷歌地图：初始化时屏幕上出现水平灰线
【发布时间】：2017-10-18 10:23:14
【问题描述】：

我正在尝试使用 Google Maps API 在我的 web 应用程序中呈现 google 地图的实例。

当地图初始化时，它会用粗的水平灰线渲染。

我怎样才能摆脱这些灰线？

注意：

问题与缩放无关。
我的所有浏览器都存在同样的问题，它们都是最新版本。
Google maps has grey section 中的修复都没有解决我的问题。

下面是当前输出的图像。

google map horizontal grey lines

html.erb

<div id="map" class="map"</div>

<script src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.secrets.google[:maps][:api_key] %>&callback=initMap"
async defer></script>

function initMap() {
 new gravy.train.Map('map', {
  center: {lat: 51.21, lng: 0},
  zoom: 8
 });
}

gravy.train.Map = function(id, options) {
 this.container = document.getElementById(id);
 this.map = new google.maps.Map(this.container, options);
}

css

.map {
 height: 400px;
 width: 100%;
 border: 1px solid black;
 box-shadow: 2px 2px 2px black;
}

谢谢！

【问题讨论】：

看起来是您这边的样式问题。你能在示例页面developers.google.com/maps/documentation/javascript/examples/… 上看到这种行为吗？
它在链接中的示例上显示良好。没有灰线

标签： javascript html css ruby-on-rails google-maps

【解决方案1】：

我们的地图 API 也发生了同样的事情。我们发现问题出在 global.css 文件中的 1 行 CSS。设置为“最大高度：90%；”像这样的“img”：

    img {
      max-width: 100%;
      max-height: 90%;
    }

注释掉“最大高度：90%；”并且地图上不再有水平灰色条！

【讨论】：