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

Posted 2023-02-23

【中文标题】Google Map v3 在 Chrome 中使用带 Foundation 的水平灰线初始化

【英文标题】：Google Map v3 Initializing with horizontal gray line w/ Foundation in Chrome

【发布时间】：2014-05-28 13:25:30

【问题描述】：

似乎与 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;
    

【问题讨论】：

看起来像一个四舍五入的问题。您的地图容器高度是基于像素还是百分比值？

此错误并非孤立于 Foundation。

Bootstrap 3 中也存在此错误。不要认为现在有“答案”。

【参考方案1】：

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

CSS

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

SASS

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

【讨论】：

应该注意，这将禁用地图的拖动。

这是因为-webkit-transform: none !important;不应该应用于所有div尝试：.gm-style div div * -webkit-transform: none !important;

【参考方案2】：

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

根据 gmaps-api-issues 上的this bug thread：

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

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

【参考方案3】：

似乎它与以下内容有关，该内容由 Google 内嵌到图像中：

-webkit-transform: translateZ(0px)

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

【讨论】：

我也遇到了这个问题，并尝试删除我的h 标签，它也修复了它。虽然不是一个好的修复。是否已提交 Chrome 错误报告？

确认删除标题标签似乎可以解决此问题，但这不是一个可持续的解决方案。

【参考方案4】：

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

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

【讨论】：

我更希望您添加例外而不是否决它。因为我认为有很多人认为这个解决方案就足够了。

好吧，不幸的是，cmets 在格式方面太有限，无法有效地解释您的解决方案的问题

【参考方案5】：

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

不过在 Firefox 上没问题。

您可以发布一个指向您网站的链接作为示例吗？

【参考方案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();

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

【参考方案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;

【参考方案8】：

如果-webkit-transform: none !important; 不起作用，请确保您的浏览器没有放大。将其放大到 110% 会导致相同的灰线。

【参考方案9】：

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

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

它对我有用！

【讨论】：

不完全。它消除了一些线条，但如果你寻找它们，它们仍然存在

【参考方案10】：

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

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

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

我确信它会及时在 Chrome 中修复，但让我很恼火，现在想要修复它。

我尝试的其他解决方案不允许地图平移。

【参考方案11】：

就我而言，我需要一种简单的方式来显示餐厅的位置。所有解决方案都不适用于我，所以我选择了以下解决方案，使用 iFrame，尺寸在我的 css 类中指定：

<div class="fluid google_maps">
    <iframe
      
      
      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（谷歌的免费限制），所以这对我来说是完美的。 您确实需要创建一个 google API 密钥，但这 1 分钟就可以了。

埃菲尔铁塔，可以是任何地址，也可以是已知位置，一般在google maps网站填写。

【参考方案12】：

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

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

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

如果您的谷歌地图背景颜色为黑色，则颜色 #000000，如果是其他颜色 - 更改此颜色。

使用谷歌地图视差效果很好