我有一张不会显示的Google地图. FF&中的问题似乎是相同的. Chrome,但在IE中更糟糕“(总是最新版本).
在FF& Chrome我的位置有问题：相对; css元素样式.一旦切换到(使用开发工具)position：absolute(或：fixed);在FF中一切都很好.在Chrome中,地图仅显示上限30％(从顶部开始).
在IE中,地图甚至没有加载.
这是来自< head>的脚本内容.内容仅用于测试,并不代表任何内容.
注意：我只使用它来加载地图.这将在稍后交换.
<!-- Script inside <head> tag -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
file=api&
v=2&
key=<?PHP echo self::GOOGLE_API_KEY; ?>&
sensor=false">
</script>
<script type="text/javascript">
function initialize()
{
var startpos = new google.maps.LatLng( 50.978056,11.029167 );
var ops = {
zoom: 6,center: startpos,mapTypeId:
google.maps.MapTypeId.ROADMAP,tileSize: new google.maps.Size( 256,256 )
}
var map = new google.maps.Map( document.getElementById("map_canvas"),ops );
var pos1 = new google.maps.LatLng( 50.7510776,12.4820724 );
var contentString1 = '<div align="left" dir="ltr" class="infowin"><h3>test</h3>testen</div>';
var infowindow1 = new google.maps.InfoWindow( {
content: contentString1,maxWidth: 5
} );
var marker1 = new google.maps.Marker( {
position: pos1,map: map,title: 'test'
} );
google.maps.event.addListener(
marker1,'click',function() {
infowindow1.open( map,marker1 );
}
);
}
</script>
<!-- html markup - There *really* isn't anything else --> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%;"></div> </body>
我在google上花了很多时间而没有找到任何东西.有任何想法吗？谢谢！
解决方法
html,身体应该是身高：100％;
但请记住,如果你的地图持有人元素是另一个元素的子元素,那么该元素也应该具有高度：100％;
否则,只设置html和body对你没有任何好处.
一个例子来解释我的观点：
<html>
<head>
<style>
html,body { height:100%; }
</style>
</head>
<body>
<div id="wrapper">
<div id="google-map-holder" style="width:100%; height:100%;"></div>
</div>
</body>
</html>
所以,如果你正在做类似上面的事情.高度：100％;不会在这里工作.
为了完成这项工作,你必须对#google-map-holder所有的父母做同样的事情,在这种情况下我们会增加高度：100％;到#wrapper元素.
如果,#google-map-holder元素直接位于#wrapper元素之外,并且直接然后只是做html,身体的子节点就足够了.
