谷歌地图缩放控件无法正确显示

我已经使用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

谷歌地图缩放控件无法正确显示

回答

相关问题