地图缩放控件未正确显示[重复]答案

【问题标题】：Map zoom controls not displaying correctly [duplicate]地图缩放控件未正确显示[重复]
【发布时间】：2012-04-11 20:39:01
【问题描述】：

我使用 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);
}

【问题讨论】：

标签： google-maps-api-3

【解决方案1】：

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

在你的 CSS 中试试这个

.gmnoprint img {
    max-width: none; 
}

【讨论】：

谢谢，我从没想过这是我的css
你也可以查看这个答案，stackoverflow.com/questions/9663375/…

【解决方案2】：

如果您使用 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】：

一开始遇到同样的问题，后来才发现

google.maps.event.addDomListener(window, 'load', initialize);

扮演非常重要的角色。

我添加了它，对我来说它有效。

签出以下代码。

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>

【讨论】：