Question

有没有人知道应如何解决这个问题？我一直在寻找它，但找不到任何东西

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

Answer 1

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>

嵌入式Google地图无法正常显示

1 个答案: