Google maps api 3 谷歌在Chrome中绘制随机垂直线_Google Maps Api 3

Google maps api 3 谷歌在Chrome中绘制随机垂直线

google-maps-api-3

Google maps api 3 谷歌在Chrome中绘制随机垂直线,google-maps-api-3,Google Maps Api 3,我正在我的网站上实现谷歌地图，我刚刚开始注意到这一行出现。它只发生在Chrome（Windows）中，无论我在代码中后退多远，我似乎都无法让它消失。缩小时，线会随机渲染视口中的其他位置，通常在右侧你有没有想过是什么原因造成的以下是我应用于地图画布的CSS： #map_canvas img { max-width: none!important; } #map_canvas { height: 100%; width: 100%;

我正在我的网站上实现谷歌地图，我刚刚开始注意到这一行出现。它只发生在Chrome（Windows）中，无论我在代码中后退多远，我似乎都无法让它消失。缩小时，线会随机渲染视口中的其他位置，通常在右侧

你有没有想过是什么原因造成的

以下是我应用于地图画布的CSS：

  #map_canvas img {
      max-width: none!important;
   }
   #map_canvas {
      height: 100%;
      width: 100%;
      position: absolute;
   }
   /** Make the map responsive to the container **/
   .map-container {
      height: 0;
      position: relative;
      padding-bottom: 80%;
      margin-right: -3%; /*compensation for margin0 on span9*/

   }

下面是地图画布项的基本HTML结构

  <div class="span9">
     <div class="map-container"> <!-- container needed for responsiveness -->
        <div id="map_canvas"></div>
        <div class="hidden-phone">
           <ul>
              <li onclick="toggle()">Restrooms</li>
              <li onclick="toggle()">Handicap Access</li>
           </ul>
        </div>        
     </div>
  </div>



洗手间
残疾人通道

我也看到了这个问题。它似乎在显示垂直滚动条时出现。Tom的上述答案删除了滚动条，但对于大多数人来说，这可能不是一个可行的解决方案。这很可能是一个Chrome bug。在过去的几个月里，他们对滚动条做了很多更改，所以这并不奇怪。

这里也有同样的问题。我的结论是这是一个Chrome bug。它只是在过去一周左右才出现的。只有在地图居中时才会发生。下面是如何重现这个问题

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html,body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden;}
            #map-canvas { height: 600px; max-width: 800px; margin: 0 auto; }
        </style>
        <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?key=&sensor=true">
        </script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(-34.397, 150.644),
                    zoom: 8
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                        mapOptions);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>


html，正文{高度：100%；宽度：100%；边距：0px；填充：0px；溢出：隐藏；}
#地图画布{高度：600px；最大宽度：800px；边距：0自动；}
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（-34.397150.644），
缩放：8
};
var map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

你应该看到一张居中的地图。如果您慢慢调整浏览器的大小，水平线就会来回移动。如果从#地图画布中删除

边距：0 auto

，地图将向左对齐，线条消失

或者，将

max width:100%

添加到#map canvas，您将拥有一个全宽贴图，没有线条。所以，只有中央地图影响了很多响应性网站。

我在chrome上也遇到了同样的问题，我切换到了3.14版本，这就解决了问题如果你像这样加入谷歌的脚本，应该可以解决这个问题

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

此问题已在GMAP-API_问题V3（）上得到确认

虽然广泛报道为白线问题，但这些错误线的颜色是地图的背景颜色：在地图上选择选项

这个解决方案对我有效

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

src=”http://maps.googleapis.com/maps/api/js?v=3.14&（键=**）和传感器=假“>

谢谢

这是我在chrome上遇到的缩放问题

你能检查一下你的浏览器缩放吗？当缩放将平铺放置在非整数像素坐标时，这通常是一个问题。您可以通过按ctrl-0来重置缩放。

您是故意删除地图控件的吗？这只是不同缩放级别受影响区域的一个小屏幕快照。缩放控件可能存在css问题（应用于分幅）。需要更多信息才能确定。这里也有同样的错误。Chrome OSX（版本34.0.1847.116）。OSX 10.9.2。我正在使用一个传单插件来显示Google图层。这里提到的错误与此相同：虽然这解决了垂直线问题，但我注意到它使地图功能的放大和缩小速度大大降低。还有其他人经历过吗？没有，我没见过这样的问题，但也许你可以试试3.15，也许这可以解决你所遇到的速度问题mentioned@btargac：该问题似乎是在3.15中引入的，因此3.14是当前没有错误的最后一个版本。无论加载的是？v=3.14还是？v=3.15，或者根本没有参数，我看代码和结果没有区别。我总是在Chrome上看到白线，也是水平的。你能分享一下链接吗？也许我能看到另一个问题@RalfI没有滚动条，只有白线。当浏览器放大/缩小时，我在v3.x中遇到了这种情况。我尝试更改版本，但直到此时我才离开！谢谢