谷歌地圖api v3工具：視覺扭曲？

我剛剛注意到gMap視圖工具正在顯示......而不尋常。他們的地區似乎仍然被恰當地定義 - 我可以很好地與他們互動，只是他們的外表看起來很亂。谷歌地圖api v3工具：視覺扭曲？

我沒有應用任何CSS到任何地圖塊，並且我已經應用到地圖容器的唯一css是width:100%; height:100%; z-index:0;（我通常這麼做）。

我確實在頁面上有position:absolute;和position:fixed;和一些高z-index s（500 & 1000）的其他元素。他們是否有可能導致Map工具的視覺扭曲？

我在最新版本的Chrome，Chrome Canary，Ffx，Safari和Opera（在Mac OSX上）看到了同樣奇怪的視覺失真。

我檢查了開發工具/螢火蟲，並沒有意外的CSS被應用到地圖的容器或直接應用到它的工具。

Google Maps Api v3: Map interface tools

這裏是確切的HTML（我去掉了其他的元素和CSS和古怪仍然發生）：

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

編輯：它出現的問題是來自Foundation和Bootstrap的組合：刪除其中一個可以解決問題。此外，頁面上沒有元素引用libs中的類也沒關係，它會導致失真。

我試圖把它放在小提琴中，但我無法加載jsfiddle.net。

來源

2012-12-19 jacob

只是這個新項目？所有項目？在一臺電腦上？所有電腦？我們可以看到演示嗎？否則在這裏做的事情不多。 – Sparky

我現在只在一個項目上工作。我已經在兩臺電腦上進行了測試：OSX 10.6和10.8。我正在研究一個笨拙的小提琴（有很多框架的事情發生，我必須去掉），但我無法訪問jsfiddle.net。 – jacob

是的，由於某種原因，jsFiddle現在非常緩慢。你通過做一個演示來做正確的事情，但這正是爲什麼問題不應該依賴jsFiddle來顯示他們的代碼。 – Sparky

對於面臨同樣問題的未來用戶，這裏是修復。

#map img{max-width: inherit;}

像其他的答案說，這是最大寬度的問題。

來源

2013-01-13 18:50:03

'#map img {max-width：inherit！important; max-height：inherit！important}' –

Bootstrap和基金會設置{ img max-width:100% }谷歌地圖畫布。這會導致地圖控件出現偏離。將css更改爲max-width:none;。 [source]

買者：顯然img { max-width: 100% … }是圖像自動調整大小爲響應佈局的整體，所以請謹慎使用。 [source]

來源

2012-12-20 00:48:35 jacob

是，＃地圖帆布IMG { 最大寬度：沒有; } 爲我解決了這個問題。 –

基金會5不僅打破了gmap，還打破了MapQuest。幸運的是，兩個Goomap & Quest都有類允許我們超載F5行爲僅適用於地圖顯示。

.google-map { 
    height: 400px; // no default height 
    color: #191970; // default color for both text and background is white !!! 
} 

.quest-map { 
    height:400px; 
    color: #191970; 
} 

// Fix Foundation bug with MapQuest 
.mqa-display { 
    img {max-width: none;} 
    label { width: auto; display: inline; } 
} 

// Fix Foundation bug with GoogleMap 
.gm-style { 
    img { max-width: none; } 
    label { width: auto; display: inline; } 
}

來源

2015-02-18 14:36:44 Fulup

谷歌地圖api v3工具：視覺扭曲？

回答

相關問題