google-maps - 谷歌地图 API V3 : weird UI display glitches (with screenshot)

Question

如果您对 Google map UI 组件出现这种奇怪故障的原因有任何想法，我们将不胜感激!

map 是用以下内容创建的:

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

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

Answer 1

我们遇到了同样的问题。 CSS 设计器使用的是这种样式:

样式.css

img {max-width: 100%; }

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

样式.css:

#map_canvas img { max-width: none; }

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

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