Question

我使用API3创建了一个简单的地图。但是，左上角的缩放控件显示为“Squashed” - 它们无法正常显示。地图的其余部分很好。奇怪的是，我使用了与先前网站相同的方法，这些方法运作良好。

以下是一些代码：

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

Answer 1

问题应该是因为普遍img { max-width: 100%; }

在你的css中试试这个

.gmnoprint img {
    max-width: none; 
}

Answer 2

最初我遇到同样的问题，然后我意识到

google.maps.event.addDomListener（窗口，＆＃39;加载＆＃39;，初始化）;

扮演非常重要的角色。

我添加了它并且对我来说它有效。

结帐以下代码。

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>

Answer 3

如果您使用的是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%;
}

只需按原样替换代码。

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

3 个答案: