Html 谷歌地图<；部门>；杀死其他页面元素_Html_Api_Google Maps_Google Maps Api 3_Google Api

Html 谷歌地图<；部门>；杀死其他页面元素

html api google-maps google-maps-api-3 google-api

Html 谷歌地图<；部门>；杀死其他页面元素,html,api,google-maps,google-maps-api-3,google-api,Html,Api,Google Maps,Google Maps Api 3,Google Api,我有三个元素：两个表和一个div，它是gmap的画布。当这条线 <div id="map-canvas"/> 存在，GMAP显示正确，但我的其他元素不可见。在FireFox中检查元素时，它们也不会出现。当行不存在时，GMAP当然会消失，我的其他元素也会正确显示。原因何在？我的整个代码都是附加的，因为它相对较短 <!DOCTYPE html> <html> <head> <meta name="viewport" content=

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

<div id="map-canvas"/>

存在，GMAP显示正确，但我的其他元素不可见。在FireFox中检查元素时，它们也不会出现。当行不存在时，GMAP当然会消失，我的其他元素也会正确显示。原因何在？我的整个代码都是附加的，因为它相对较短

<!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>


/*gMaps风格*/
html{高度：100%}
正文{高度：100%；边距：0；填充：0；}
#地图画布{高度：50%；位置：固定；顶部：50%；}
//颜色选择器jQuery
//GMAPAPI
//表分拣机
//GMAPAPI
函数初始化（）{
var center=new google.maps.LatLng（0,0）；
变量映射选项={
中心:中心,，
缩放：2，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
var map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
//采色器
$（文档）.ready（函数（）{
$（'#调色板td'）。单击（函数（）{
color=$（this.css（'background-color'）；
$（'body'）.css（'background-color'，color）；
});
});
//表分拣机
$（文档）.ready（函数（）
{ 
$（“#myTable”）.tablesorter（）；
} 
); 
//表元素
//桌头
//桌体

地图似乎覆盖了上面评论中提到的其他元素（如果使用开发人员控制台，您可以看到它们吗）

或者将div相应地定位在地图下方，完全移除固定位置，或者如果重叠是您的意图，则添加z索引

Div不应该自动关闭

尝试将“关于CSS顶部属性”中的

替换为


：
top CSS属性指定定位元素的部分位置。它对未定位的图元没有影响
对于绝对定位的图元（位置：绝对或位置：固定的图元），它指定图元的上边缘边缘与其包含块的上边缘之间的距离
top:50%你花了整个地方来找地图。即使是10%也不够好。如果你不需要什么特别的安排，你可以省去它
必须正确关闭
元件：
<div id="map-canvas"></div>


map canvas styletop:50%影响此行为。如果你把它注释掉，你会在地图的上部和后面的表格中得到一张地图。是的。你的地图是高度的50%，你将顶部设置为50%，这意味着距离顶部50%。我这样做了，还把地图移到了其他元素下面。整个页面现在显示正确。