谷歌地圖縮放控件無法正確顯示

我已經使用API3創建了一個簡單的地圖。但是，左上方的縮放控件看起來像「壓扁」 - 它們沒有正確顯示。地圖的其餘部分沒有問題。奇怪的是，我已經使用了與以前的網站相同的方法，在那裏工作很好。谷歌地圖縮放控件無法正確顯示

下面是一些代碼：

var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var marker; 
var markersArray=[]; 
var html; //to create urls 
var directionsVisible = new Boolean(); 
directionsVisible = false; 

function initialize() {  
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var orchards = new google.maps.LatLng(52.512805,-2.76007); 
    var myOptions = { 
     zoom:14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: orchards, 
     panControl: false 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    addMarker(orchards); 
}

請任何人都可以提出什麼問題？

來源

2012-03-28 maxelcat

176

問題應該是因爲普遍img { max-width: 100%; }

嘗試在你的CSS這一個

.gmnoprint img { 
    max-width: none; 
}

來源

2013-09-10 15:42:38 Muhammed

謝謝，我從來沒有想過這是我的C SS – Ayoub 2014-07-03 09:24:03

如果您使用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:38:05 user3141435

最初我面臨同樣的問題，然後後來我實現

google.maps.event.addDomListener（窗口， '負載'，初始化）;

發揮非常重要的作用。

我添加了它，對我來說它的工作原理。

簽出以下代碼。

CSS代碼

<style> 
     #divmap { 
     height: 300px; 
     width:100%; 
     margin: 10px; 
     padding: 10px; 

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

對於JS

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 

<script> 

     function initialize() { 
     var mapOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng(21,78), 
     panControl:true, 
     zoomControl:true, 
     mapTypeControl:true, 
     scaleControl:true, 
     streetViewControl:true, 
     overviewMapControl:true, 
     rotateControl:true 
     } 
     var map = new google.maps.Map(document.getElementById("divmap"), 
      mapOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

和最終的HTML

<div id="divmap"></div>

來源

2014-03-09 15:21:41

谷歌地圖縮放控件無法正確顯示

回答

相關問題