谷歌地图缩放控件无法正确显示
我用API3创build了一个简单的地图。 但是,左上方的缩放控件看起来“压扁” – 它们没有正确显示。 地图的其余部分是好的。 奇怪的是,我已经使用了与以前的网站相同的方法,在那里工作很好。
这是一些代码:
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); }
请任何人都可以提出什么是错的?
这个问题应该是因为通用img { max-width: 100%; }
img { max-width: 100%; }
试试这个到你的CSS
.gmnoprint img { max-width: none; }
最初我面临同样的问题,后来我意识到
google.maps.event.addDomListener(window,'load',initialize);
扮演非常重要的angular色。
我添加了它,对我来说,它的工作原理。
签出以下代码。
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>
如果您正在使用Dreamweaverstream体网格function,则默认设置应如下所示:
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%; }
只需要将代码replace即可。