谷歌地图 <div> 杀死其他页面元素答案

【问题标题】：Google Maps <div> kills other page elements谷歌地图 <div> 杀死其他页面元素
【发布时间】：2014-02-13 23:53:56
【问题描述】：

我有三个元素：两个表格和一个 div，它是 gMaps 的画布。当这条线

<div id="map-canvas"/>

存在，gMaps 显示正确，但我的其他元素不可见。在 FireFox 中检查元素时，它们也不会出现。当这条线不存在时，gMaps 当然会消失，而我的其他元素也会正确显示。原因可能是什么？我的整个代码都被附加了，因为它相对较短。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css"> /*gMaps style*/
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0;}
        #map-canvas { height: 50%; position: fixed; top: 50%;}
    </style>

    <script src="http://code.jquery.com/jquery-2.0.3.js" type="text/javascript">//jQuery for color picker</script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">//gMap API</script>    
    <script type="text/javascript" src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.min.js">//tablesorter</script>
</script>




    <script type="text/javascript">     //gMap API
        function initialize() {

            var center = new google.maps.LatLng(0,0);

        var mapOptions = {
            center: center,
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };

        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>






<script>//colorpicker
    $(document).ready(function(){


        $('#palette td').click(function(){
            color = $(this).css('background-color');    
            $('body').css('background-color' , color);
        });

    });

</script>

<script>//tablesorter

    $(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
    ); 

</script>


</head>
<body>
    <div id="map-canvas"/>

    <table id="palette">
        <tr>
            //table elements
        </tr>
    </table>


        <table id="myTable" class="tablesorter"> 
            <thead> 
                <tr> 
                //table head
                </tr> 
            </thead> 
            <tbody> 
            //table body
            </tbody> 
        </table> 

    </body>
    </html>

【问题讨论】：

似乎地图画布样式top: 50%; 会影响此行为。如果您将其注释掉，您将在地图上方获得地图和地图后的表格。
是的。您的地图是高度的 50%，并且您将顶部设置为 50%，这意味着距离顶部 50%。并且没有其他人的位置。

标签： html api google-maps google-maps-api-3 google-api

【解决方案1】：

Div 的不应该自动关闭...

尝试将<div id="map-canvas"/> 替换为<div id="map-canvas"></div>

【讨论】：

我这样做了，还把地图移到了其他元素的下方。整个页面现在可以正确显示了。

【解决方案2】：

如上面 cmets 中所述，地图似乎覆盖了其他元素（如果您使用开发控制台，您能看到它们）。

要么在地图下方相应地定位 div，要么完全移除固定定位，要么添加 z-index（如果您的意图是重叠）。

【讨论】：

【解决方案3】：

来自MDN docs关于CSS top 属性：

顶部 CSS 属性指定定位元素的部分位置。它对非定位元素没有影响。

对于绝对定位的元素（位置：绝对或位置：固定），它指定元素的上边距边缘与其包含块的上边缘之间的距离。

使用top: 50%;，您为地图花费了整个空间。即使是 10% 也不够好。如果你不需要一些特殊的安排，你可以省略它。

并且<div> 元素必须正确关闭：

<div id="map-canvas"></div>

【讨论】：