Google Maps API V3：奇怪的 UI 显示故障（附截图）

Posted 2023-02-23

【中文标题】Google Maps API V3：奇怪的 UI 显示故障（附截图）

【英文标题】：Google Maps API V3 : weird UI display glitches (with screenshot)

【发布时间】：2011-11-20 06:32:21

【问题描述】：

任何对导致谷歌地图 UI 组件出现这种奇怪故障的原因有任何想法的人，非常感谢您的来信！

地图是通过以下方式创建的：

        var options = 
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        ; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

即使没有标记，故障也是一样的。

【参考方案1】：

我们遇到了同样的问题。 css 设计师使用的是这种风格：

style.css

img max-width: 100%; 

我们没有禁用缩放控件，而是通过覆盖 map_canvas 元素的 img 样式来解决问题，如下所示：

style.css：

#map_canvas img  max-width: none; 

缩放控件现在可以正确显示。

设置“img max-width:100%”是响应式/流畅网站设计中采用的一种技术，以便在调整浏览器大小时按比例调整图像大小。显然，一些 CSS 网格系统已经开始默认设置这种样式。更多关于流体图像的信息在这里：http://www.alistapart.com/articles/fluid-images/ 不知道为什么这与谷歌地图冲突......

【讨论】：

这也影响了我。 Google Maps API v3 使用大尺寸透明 png 精灵图像 (http://maps.gstatic.com/mapfiles/iw3.png)，该图像放置在带有 overflow: hidden 的父容器内。因此，限制图像的宽度会导致图像被压缩。

【参考方案2】：

使用最新版本的 google maps api 你需要这个：

<style>
  .gm-style img  max-width: none; 
  .gm-style label  width: auto; display: inline; 
</style>

【讨论】：

这与公认的解决方案相同，但使用不同的选择器并额外重置您自己的标签样式。

【参考方案3】：

看起来缩放控件有问题。尝试将zoomControl:false 添加到您的选项中。

事实上，正常的缩放滑块似乎位于页面的左侧（使用 Firebug > Inspect Element）。可能是 CSS 冲突？

【讨论】：

好的，找到了。这是我的img max-width: 100%;

我面临同样的问题，并在删除 css imgmax-width:100%; 后修复

【参考方案4】：

我已经解决了这个问题：

在您的 CSS 中，您添加了如下内容：

img max-width: 100%; height: auto;

尽量不要让它成为全球性的，它应该可以解决你的问题:)

【参考方案5】：

这对我有用：

#map img  max-width: none !important;  (from Patrick's answer)

属性“！important”确保覆盖任何其他样式，#map 是在声明新对象 Gmaps 时分​​配的 id：

<script>
    map = new GMaps(
          div: '#map',           <-  your id
          lat:  *******,
          lng:  *******,
          scrollwheel: false,
          panControl: true,
          ....
          ...
</script>

【参考方案6】：

如果您使用 Dreamweaver 流体网格功能，您的默认设置应如下所示：

img, object, embed, video 
    max-width: 100%;

/* IE 6 does not support max-width so default to width 100% */
.ie6 img 
    width:100%;

试试这个：

object, embed, video 
    max-width: 100%;

#map_canvas img  max-width: none; 
/* IE 6 does not support max-width so default to width 100% */
.ie6 img 
    width:100%;

只需按原样替换代码即可。

【参考方案7】：

Bootstrap（从 2.3.2 版开始）以与接受的答案相同的方式混淆图像。

其实我怀疑Haroldo的网站使用的设计使用了Bootstrap。

我只是发布此内容，因为没有其他人提到 Bootstrap，并且有人可能正在寻找特定于 Bootstrap 的解决方案。

【参考方案8】：

我在 Square Space 网站上遇到了这个问题。我无权访问 CSS 样式表。由于您嵌入的是 html 文档，因此您可以使用内联 CSS 来解决问题。我修改了容器的样式，而不是进行站点范围的更改（我不能这样做）。这是我所做的：

<style>
  html, body, #map-canvas 
    height: 600px;
    width: 100%;
    margin: 0px;
    padding: 0px
  
  #map-canvas img max-width: none;
</style>