Google Maps API V3：奇怪的UI显示故障（带有屏幕截图） [英] Google Maps API V3 : weird UI display glitches (with screenshot)

问题描述

地图创建时间为：

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

，即使没有标记，毛刺也是一样。

解决方案

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

style.css

  img {max-width：100％; } 
  

我们通过覆盖map_canvas元素的img样式来解决问题，例如所以：

style.css：

  #map_canvas img {max-width：none; } 
  

现在可以正确显示缩放控件。 $ b 设置img max-width：100％是一种在响应/流畅网站设计中采用的技术，以便在浏览器重新调整大小时，图像按比例重新调整大小。显然，一些CSS网格系统默认开始设置这种风格。有关流体图像的更多信息，请访问： http://www.alistapart.com/articles/fluid-images/ 不知道为什么这与谷歌地图冲突...

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.

解决方案

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

style.css

img {max-width: 100%; }

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.

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屋！