我正在使用地理编码来显示带有显示用户位置的谷歌地图。我正在寻找带有滑动菜单的 map 。我遇到的问题是,当您打开滑动菜单时, map 只占据左上角的一小块区域,但是一旦您调整浏览器窗口的大小, map 就会像我想要的那样占据整个区域。无论您以何种方式调整浏览器窗口的大小,即使将其缩小,也会发生这种情况。如果您需要查看我的更多代码,请告诉我:
滑动菜单功能
$(document).ready(function()
{
$(".content").hide(); //updated line, removing the #panel ID.
$('#tab').toggle(function() //adding a toggle function to the #tab
{
$('#panel').stop().animate(
{
width:"800px", opacity:0.8 //to adjust width of bar
}
, 500, function() //sliding the #panel to 200px
{
$('.content').fadeIn('slow'); //slides the content into view.
});
},
function() //when the #tab is next cliked
{
$('.content').fadeOut('slow', function() //fade out the content
{
$('#panel').stop().animate(
{
width:"0", opacity:0.1 //slide the #panel back to a width of 0
}
, 500);
});
});
});
滑动菜单html
<div id="panel">
<div class="content">
<div id="mapContainer"></div>
</div>
</div>
CSS
#tab {
width: 30px;
height: 100px;
position: fixed;
left: 0px;
top: 100px;
display: block;
cursor: pointer;
background-color: #ff0000;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#panel {
position: fixed;
left: 0px;
top: 50px;
background-color: #ffffff;
height: 500px;
width: 0px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#mapContainer {
height: 500px;
width: 800px;
border:10px solid #eaeaea;
}
最佳答案
map 容器需要宽度和高度才能正确显示 map ,但动画似乎干扰了这些值。
当宽度和高度设置正确并引发调整大小事件时,当浏览器调整大小时 map 工作。
解决您问题的最快方法是在动画结束时调用调整大小方法:
google.maps.event.trigger(map, 'resize');
JSFiddle 更新:http://jsfiddle.net/uADHv/2/
关于javascript - map 不占用整个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8787002/