logo标签列表

谷歌地图无法显示

javascriptgoogle-maps
6

我有一个谷歌地图无法显示的问题。该问题在FF和Chrome中似乎相同，但在IE（始终是最新版本）中更加“糟糕”。

在FF和Chrome中，我遇到了position: relative; css元素样式的问题。只要我切换到（使用开发工具）position: absolute(or: fixed);一切都会在FF中正确显示。在Chrome中，地图仅显示上部的30％。

在IE中，地图甚至没有被加载。

这是来自<head>的脚本内容。内容仅用于测试，没有实际意义。请注意：我只使用此内容来加载地图。稍后将进行更换。

<!-- Script inside <head> tag -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?
        file=api&amp;
        v=2&amp;
        key=<?php echo self::GOOGLE_API_KEY; ?>&amp;
        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>

我在谷歌上花费了很多时间，但没有找到任何有用的信息。有什么建议吗？谢谢！

2个回答
21

html和body应该设置为height:100%;。

但要记住，如果你的地图容器元素是另一个元素的子元素，则该元素也应该设置height: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>

所以，如果你正在做类似以上的事情。在这里 height:100%; 是不会起作用的。

要使其工作，您必须对所有父元素执行与 #google-map-holder 元素相同的操作，在此示例中，我们将 height:100%; 添加到 #wrapper 元素中。

如果 #google-map-holder 元素直接位于 #wrapper 元素之外并且是 body 的子元素，则只需执行 html，body 就足够了。

3
问题在于#map_canvas的height: 100%;。
将以下代码添加到您的中，它应该可以工作（在Firefox 5和Safari 5.1中测试）：
<style>
  html, body {
    height: 100%;
  }
</style>

想了解为什么需要这样做，请查看此问题的第一个答案：

Div 100% height works on Firefox but not in IE

我查看了我的基本样式表，认为这已经存在了，但事实并非如此。感谢提醒！+1 - kaiser
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接