Google Maps API V3:奇怪的 UI 显示故障(附截图) [英] Google Maps API V3 : weird UI display glitches (with screenshot)

问题描述

对于是什么导致 google 地图 UI 组件出现这种奇怪故障的原因有任何想法的任何人，非常感谢收到您的来信！

Anyone with any ideas on what's causing this weird glitch with the google maps UI components, be really grateful to hear from you!

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

the map is created with:

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

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

and the glitch is the same even with no markers.

推荐答案

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

We ran into the same problem. The css designer was using this style:

style.css

img {max-width: 100%; }

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

Instead of disabling the zoom control, we fixed the problem by overriding the img style for map_canvas elements like so:

style.css:

#map_canvas img { max-width: none; }

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

The zoom control now displays correctly.

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

Setting "img max-width:100%" is a technique employed in responsive/fluid web site design so that images re-size proportionally when the browser is re-sized. Apparently some css grid systems have started setting this style by default. More info about fluid images here: http://www.alistapart.com/articles/fluid-images/ Not sure why this conflicts with the google map...

这篇关于Google Maps API V3:奇怪的 UI 显示故障(附截图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！