Question

似乎与CSS相关，因为在简单的HTML页面中初始化地图的效果很好。我已经添加了建议的CSS来修复已知问题（下面），但似乎无法摆脱这个。

#map {
    *, *:before, *:after {
        -moz-box-sizing: content-box!important;
        -webkit-box-sizing: content-box!important;
        box-sizing: content-box!important;
    }
    img {
        max-width: none;
        height: auto;
    }
    label {
        width: auto;
        display: inline;
    }
}

enter image description here

Answer 1

对于其他寻找此错误的临时解决方案的人：

CSS

.map *, .map *:before, .map *:after {
    -webkit-transform: none !important; 
}

SASS

.map {
  *, *:before, *:after {    
    -webkit-transform: none!important;
  }  
}

Answer 2

这似乎是Chrome的渲染错误（我可以在v 34.0.1847.131中复制它），而不是使用CSS。它已在Canary修订（v 36.0.1973.2 canary）。

根据this bug thread关于gmaps-api-issues：

此修复程序位于Chrome 35中，目前计划于5月中旬发布（您可以切换到测试版渠道以立即获得修复或在Canary版本中验证它 - http://www.chromium.org/getting-involved/dev-channel）。

在此之前，与@ user699242建议一样，删除网页中的任何标题标记（h1，h2等）似乎都可以解决问题。当然，这在语义上没有吸引力，但等待可能会更好。

Answer 3

似乎它与以下内容有关，后者由Google直接添加到图片中：

-webkit-transform: translateZ(0px)

最后将其缩小为h标签。如果我删除了所有h标签（h1，h2等），灰线就会消失。所以，似乎是一个Chrome bug（v 34.0.1847.116）。

Answer 4

.gm-style div div *{ 
    -webkit-transform: none !important;
}

注意：与Nathans解决方案相同，但也保证地图仍可拖动。然而，这只是一个临时解决方案。

Answer 5

我的网站http://www.shortwave.am/也发生了这种情况，但仅限于最新版本的Chrome（我之前有版本33.x，由于某些原因没有更新，问题不存在，但是因为我改为最新的我有问题。）

虽然在Firefox上很好。

您可以发布指向您网站的链接吗？

Answer 6

我遇到了这个问题，但是垂直灰线，这是一个舍入问题。

这是因为包含地图画布的div设置为流体宽度（在我的情况下为50％），并且通常会导致子像素宽度。

为了解决我的问题，我不得不听地图画布调整大小事件，检索并舍入画布容器的内部宽度（宽度设置为50％的那个）并将圆角宽度设置回地图画布 - 当然，所有这些都在JavaScript中。

这是我的HTML标记：

<div id="mapContainer">
    <div id="mapCanvas"></div>
</div>

以下是我的CSS规则：

#mapContainer {
  width: 50%;
}

#mapCanvas {
  height: 100%;
  width: 100%;
  float: right;
}

以下是JavaScript修复：

var isResizing = false;

var fixMapCanvasRoundingIssue = function () {
    if (isResizing == false) {
        isResizing = true;

        var width = Math.floor(document.getElementById("mapContainer").getBoundingClientRect().width);

        $("#mapCanvas").width(width);

        // is this needed ?
        google.maps.event.trigger(map, "resize");

        isResizing = false;
    }
}

这是谷歌地图初始化：

var mapCanvas = document.getElementById("mapCanvas");

google.maps.event.addDomListener(mapCanvas, "resize", function () {
    fixMapCanvasRoundingIssue();
});

map = new google.maps.Map(mapCanvas , {
    ...
});

fixMapCanvasRoundingIssue();

请注意，我将地图画布设置为向右浮动，以防止在调整大小时出现任何撕裂问题。在您的情况下可能不需要这样做。

Answer 7

.gmap-container,
.gmap-container > div.gm-style,
.gmap-container > div.gm-style > div:first-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child * {
    -webkit-transform: none!important;
}

Answer 8

如果-webkit-transform: none !important;无法正常工作，请确保您的浏览器没有放大。将其缩放到110％会导致相同的灰线。

Answer 9

只需切换到较新版本的API：

<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>

它对我有用！

Answer 10

Optimiertes建议的解决方案似乎被不公平地标记下来，因为它对我有用。

我建议谨慎，因为可能存在需要转换该级别的内容的情况，但我做了以下操作并且效果很好。

#map .gm-style div div *:not(.something-that-needs-transforming){
  -webkit-transform: none !important;
}

我确定它会及时修复Chrome，但我现在想要修复它已经让我感到烦恼了。

我试过的其他解决办法并没有让地图平移。

Answer 11

在我的情况下，我需要一个简单的方法来显示餐厅的位置。所有的解决方案都不适合我，所以我使用iFrame，使用我的css类中指定的维度来寻求以下解决方案：

<div class="fluid google_maps">
    <iframe
      width="100%"
      height="100%"
      frameborder="0" style="border:0"
      src="https://www.google.com/maps/embed/v1/place?key=PLACE_APIKEY_HERE
        &q=eiffel tower">
    </iframe>
</div>

总而言之，没有javascript或任何东西，只需几行html。由于我不希望每天超过2kk的访问者（谷歌的免费限制），这对我来说是完美的。您需要创建一个谷歌API密钥，但这需要1分钟。

埃菲尔铁塔，可以是任何地址或已知位置，您通常会在谷歌地图网站上填写。

Answer 12

#map *, #map *:before, #map *:after { 
    -webkit-transform: none !important;
}

如果你不使用视差效果，它是正确的方法，但如果你想隐藏具有视差效果的水平线，这里有修复：

.gm-style > div:first-child {
    background-color: #000000;
}

颜色＃000000如果你的谷歌地图背景颜色是黑色，如果是其他 - 改变这种颜色。

使用谷歌地图视差效果正常工作

Google Map v3使用水平灰线初始化w / Foundation中的Chrome

12 个答案: