Question

我正在尝试使用Google Maps API在我的网络应用中呈现谷歌地图的实例。

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

如何摆脱这些灰线？

NB：

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

下面是当前输出的图像。

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>

JS

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;
}

谢谢！

Answer 1

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

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

注释掉“max-height: 90%;”地图上不再有水平灰色条！

Google地图：初始化时屏幕上的水平灰线

1 个答案: