Google地图api v3工具：视觉扭曲？ [英] Google Maps api v3 tools: visual distortions?
问题描述
我只是注意到gMap视图工具正在显示...非常异常。他们的区域似乎被正确定义 - 我可以与他们进行交互，只是他们的外观看起来搞乱了。
我没有应用任何CSS的地图片段，并且我应用于地图容器的唯一css是 width：100％;高度：100％;
我在页面上还有其他元素，其中有 position：absolute; 和 position：fixed; 和一些高 z-index （500和1000）。是否有可能造成地图工具的视觉扭曲？
我在最新版本的Chrome，Chrome Canary，Ffx，Safari，
我检查过dev tools / firebug，没有意外的CSS被应用到地图的容器或者直接应用到它的工具。
这里是确切的HTML（我删除了其他元素和css和奇怪仍然发生）：
< html style =width：100％; height：100％;>
< head>
< link rel =stylesheethref =shared / bootstrap / css / foundation.min.css>
< link rel =stylesheethref =shared / bootstrap / css / v2.2.2.min.css>
< script
type =text / javascript
src =http：//maps.googleapis.com/maps/api/js？key = ...>
< / script>
< script type =text / javascript>
function ginit（）{
var vancouver = new google.maps.LatLng（49.285415，-123.114982）;
var mapOptions = {
center：vancouver，
zoom：15，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（
document.getElementById（map），
mapOptions
）;
var infowindow = new google.maps.InfoWindow（），
marker;
} // ginit（）
< / script>
< / head>
< body onload =ginit（）; style =width：100％; height：100％;>
< div id =mapstyle =width：100％; height：100％;>< / div>
< / body>
< / html>
编辑 ：来自Foundation和Bootstrap的组合：删除任何一个修复问题。也没关系，页面上没有元素引用类从libs，它导致失真所有相同。
我试图把它放在一个小提琴，但是我无法加载jsfiddle.net。
对于面临同样问题的未来用户，修复
#map img {max-width：inherit;}pre>
像其他答案说的是max-width的问题。
I just noticed that the gMap view tools are displaying…rather unusually. Their regions still seem to be properly defined—I can interact with them just fine, it's just their appearance that looks messed up.
I haven't applied any CSS to any of the map pieces, and the only css I've applied to the map container is
width:100%; height:100%; z-index:0;(which I normally do).I do have other elements on the page which have
position:absolute;andposition:fixed;and some highz-indexs (500 & 1000). Is it possible they are causing the visual distortion of the Map's tools?I see the same weird visual distortion in the latest versions of Chrome, Chrome Canary, Ffx, Safari, and Opera (on Mac OSX).
I checked dev tools / firebug, and no unexpected CSS is being applied to the map's container or directly to its tools.
Here is the exact HTML (I stripped out the other elements and css and the weirdness still happens):
<html style="width:100%;height:100%;"> <head> <link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css"> <link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css"> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=..."> </script> <script type="text/javascript"> function ginit() { var vancouver = new google.maps.LatLng(49.285415,-123.114982); var mapOptions = { center: vancouver, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map( document.getElementById("map"), mapOptions ); var infowindow = new google.maps.InfoWindow(), marker; }//ginit() </script> </head> <body onload="ginit();" style="width:100%;height:100%;"> <div id="map" style="width:100%;height:100%;"></div> </body> </html>EDIT: It appears the issue is coming from the combination of Foundation and Bootstrap: removing either one fixes the issue. Also it doesn't matter that no elements on the page reference classes from the libs, it causes the distortion all the same.
I tried to put this up in a fiddle, but I couldn't get jsfiddle.net to load.
解决方案For the future users who face same problem, here is the fix.
#map img{max-width: inherit;}Like other answers said it is problem with max-width.
这篇关于Google地图api v3工具：视觉扭曲？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
