有人知道应该如何解决这个问题吗?我一直在瞪大眼睛,但找不到任何
JSFIDDLE!
<body>
<div id="flip"><img src="locate.png"/></div>
<div id="panel"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d47018.92091473647!2d12.628083100000003!3d42.56203300000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132efb44daf819f3%3A0x6be10bf1daf18dc2!2sTerni+TR%2C+Italy!5e0!3m2!1sen!2s!4v1415383956896" width="600" height="350" frameborder="0" style="border:0"></iframe></div>
</body>
CSS:
#panel,#flip
{
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
margin: auto;
width:100%;
height:350px;
display:none;
}
JQuery
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
google.maps.event.trigger(map, "resize");
});
});
display:none将导致地图一开始的大小不正确。如果你注意到地图确实正确加载了Terni,只是没有居中并缩放到正确的水平。
这里有一个快速提出的解决方案-加载时不显示任何内容,当文档准备好时立即隐藏面板
$(document).ready(function(){
$("#panel").hide();
$("#flip").click(function(){
$("#panel").slideToggle("slow");
google.maps.event.trigger(map, "resize");
});
});
http://jsfiddle.net/n6Lfau0w/3/
更新:必须在jsfiddle上以不同的方式初始化面板。我完全放弃了隐藏调用,改为操纵可见性样式。
标题
<style>
#panel,#flip
{
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
margin: auto;
width:100%;
height:350px;
/* display:none; */
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
if($("#panel").css("visibility") !== "") $("#panel").css("visibility","");
$("#panel").slideToggle("slow");
// google.maps.event.trigger(map, "resize");
});
$("#panel").css("visibility","hidden");
$("#panel").slideToggle("slow");
});
</script>
机身
<div id="flip"><img src="locate.png"/></div>
<div id="panel">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d47018.92091473647!2d12.628083100000003!3d42.56203300000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132efb44daf819f3%3A0x6be10bf1daf18dc2!2sTerni+TR%2C+Italy!5e0!3m2!1sen!2s!4v1415383956896" width="600" height="350" frameborder="0" style="border:0"></iframe>
</div>