谷歌地圖API V3：奇怪的UI顯示故障（截圖）

任何人有任何想法是什麼導致這個奇怪的小故障與谷歌地圖用戶界面組件，真的很感謝您的來信！谷歌地圖API V3：奇怪的UI顯示故障（截圖）

enter image description here

地圖與創建：

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

和毛刺是一樣的，即使沒有標記。

來源

2011-09-19 Haroldo

如果你加入，你如何聲明這個組件 – slawekwin

@slawekwin片段將是有益的 - 更新問題。 – Haroldo

183

我們遇到了同樣的問題。 CSS的設計師用這種風格：

：

的style.css

img {max-width: 100%; }

而不是禁用變焦控制，我們通過重寫img樣式爲map_canvas提供的元素，像這樣固定的問題的style.css：

#map_canvas img { max-width: none; }

變焦控制現在顯示正確。

設置「img max-width：100％」是一種在響應/流暢網站設計中採用的技術，以便在瀏覽器重新調整大小時，圖像按比例重新調整大小。顯然，一些CSS網格系統默認開始設置這種風格。有關流體圖片更多資訊：http://www.alistapart.com/articles/fluid-images/不知道爲什麼這矛盾與谷歌地圖...

來源

2011-10-01 22:23:17

這也影響了我。谷歌地圖API v3使用一個大尺寸的透明PNG雪碧圖像（'http：// maps.gstatic.com/mapfiles/iw3.png'），它放在一個父容器中，其中overflow：hidden'。因此，限制圖像的寬度會導致圖像被壓縮。 – jwal

這是一個絆倒我。非常感謝您發佈此解決方案！ –

這真的很煩人，感謝修復！ – MiniQuark

看起來像變焦控制的問題。嘗試將zoomControl:false添加到您的選項。

事實上，正常的縮放滑塊似乎位於頁面左側（使用Firebug> Inspect Element）。可能是CSS衝突？

來源

2011-09-19 14:58:45 duncan

+12

好的發現它。這是由我的'img {max-width：100％; }' – Haroldo

img {max-width：100％;}也是我的問題，謝謝！ – jamesbar2

我面臨同樣的問題，並修復後刪除CSS img {最大寬度：100％;}謝謝 – nbhatti2001

嗯，我得到了這樣的修復：

在你的CSS你補上一句：

img {max-width: 100%; height: auto;}

儘量不要把它全球，它應該解決您:)

來源

2013-04-16 21:14:22 Xedret

與谷歌地圖API的最新版本，你需要這樣的：

<style> 
    .gm-style img { max-width: none; } 
    .gm-style label { width: auto; display: inline; } 
</style>

來源

2013-10-12 22:15:30

這是接受的解決方案相同，但具有不同的選擇器和額外的重置自己的標籤樣式。 – lmeurs

幫了很多。謝謝 –

這一個實際上幫助 – Nathanphan

如果您使用Dreamweaver的流體網格功能默認的設置應該是這樣：

img, object, embed, video { 
    max-width: 100%; 
} 
/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
}

試試這個：

object, embed, video { 
    max-width: 100%; 
} 
#map_canvas img { max-width: none; } 
/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
}

只需更換代碼，因爲它是。

來源

2013-12-28 10:33:40 user3141435

Bootstrap（版本2.3.2）以與接受的答案相同的方式混淆圖像。

事實上，我懷疑在Haroldo的網站中使用的設計使用Bootstrap。

我只是發佈這個，因爲沒有其他人提到Bootstrap，有人可能正在尋找一個Bootstrap特定的解決方案。

來源

2014-01-04 02:22:12 Locoluis

我在Square Space網站上遇到了這個問題。我沒有訪問CSS樣式表。由於您正在嵌入html文檔，因此您可以使用內聯CSS來解決問題。我修改了容器的樣式，而不是進行網站範圍的更改（我無法做到這一點）。下面是我做的：

<style> 
    html, body, #map-canvas { 
    height: 600px; 
    width: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
    #map-canvas img {max-width: none;} 
</style>

來源

2014-03-11 13:38:25 bhaas

這爲我工作：「重要的」

#map img { max-width: none !important; } (from Patrick's answer)

屬性確保覆蓋任何其他樣式，#map是當你聲明的新分配的ID的對象Gmaps：

<script> 
    map = new GMaps({ 
      div: '#map',   <- your id 
      lat: *******, 
      lng: *******, 
      scrollwheel: false, 
      panControl: true, 
      .... 
      ... 
</script>

來源

2014-09-23 13:34:48 Frank

谷歌地圖API V3：奇怪的UI顯示故障（截圖）

回答

相關問題