0

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

<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});
});
});

代码

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

2 回答 2

2

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

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

你有 # 在你的 div 的 ID ：

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

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

于 2013-10-10T10:47:46.150 回答
0

您需要设置高度和宽度#mainhomediv

例如：

#mainhomediv {
  width:500px;
  height:500px;
}
于 2013-10-10T10:45:58.873 回答