Question

我正在尝试开发一个有两个容器的网页。 mainmapdiv覆盖整个页面，而mainhomediv位于mainmapdiv之上。我的目标是隐藏mainhomediv并在主图上显示一个谷歌地图点击图像（id = mapbutton）。代码如下：

<script type="text/javascript">
var map;
function initialize() {
    var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,    
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mainmapdiv"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script>
var map;
$(document).ready(function(){

//Click on button to display map
$('#mapbutton').click(function(){
    $('#mainhomediv').fadeTo("slow",0);
    $('#mainhomediv').css({opacity: 0});
    initialize();
});

//Click on Home to get back home div
$('#home').click(function(){
    $('#mainhomediv').fadeTo("slow",1);
    $('#mainhomediv').css({opacity: 1});
});
});

HTML CODE

<body>
<!--This is the primary container-->
<div id='#mainmapdiv' class='mainmapdiv'>
    <div id='#mainhomediv' class='mainhomediv'>
    .
    //Somewhere in here there is an image with id='mapbutton'
    .
    .
    </div>
</div>
</body>

现在，当我点击图片时，mainhomediv会完美隐藏，但地图不会显示在mainmapdiv上。

我导入了以下脚本：

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/apijs?sensor=false"></script>

Answer 1

不知道这是否会解决，但你必须纠正它：

您的JS链接错误：http://maps.googleapis.com/maps/apijs?sensor=false

你的div的ID中有＃：

<div id='#mainmapdiv' class='mainmapdiv'>
<div id='#mainhomediv' class='mainhomediv'>

您的脚本中有多个var map;。

Answer 2

您需要为#mainhomediv

设置高度和宽度

例如：

#mainhomediv {
  width:500px;
  height:500px;
}

Google地图不会显示在HTML <div>？</div>上

2 个答案: