it-swarm.cn

Google Maps API V3:奇怪的UI显示故障(带截图)

任何有关谷歌地图UI组件导致这种奇怪故障的任何想法的人都非常感谢您的来信!

enter image description here

地图创建时间:

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

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

80
Haroldo

我们遇到了同样的问题。 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/ 不确定为何与谷歌地图冲突...

183
Patrick Cullen

使用最新版本的google maps api,您需要:

<style>
  .gm-style img { max-width: none; }
  .gm-style label { width: auto; display: inline; }
</style>
33
Max Favilli

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

事实上,正常的缩放滑块似乎位于页面左侧(使用Firebug> Inspect Element)。可能是CSS冲突吗?

8
duncan

好吧,我得到了解决这个问题:

在你的CSS上你添加了类似的东西:

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

尽量不要让它全球化它应该解决你:)

2
Xedret

这对我有用:

#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>
1
Frank

我在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>
0
bhaas

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

事实上,我怀疑Haroldo网站上使用的设计使用Bootstrap。

我只是张贴这个,因为没有人提到Bootstrap,有人可能正在寻找一个特定于Bootstrap的解决方案。

0
Locoluis

如果您使用的是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%;
}

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

0
user3141435