0

我正在寻找一种更好的方法来使用 jQuery 盲效果显示或隐藏 Google 地图 iframe。就目前而言，随着盲效应的发生，地图会多次跳跃、闪烁并重新调整大小。是否有任何建议可以规避此问题并消除该功能？

这是一个演示：http:
//jsfiddle.net/hmMRs/

HTML 标记：

<button class="button" value="Show map">Show map</button>
<div class="map" hidden>
    <iframe width="280" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;aq=0&amp;oq=google&amp;sll=37.418436,-122.075443&amp;sspn=0.093391,0.133381&amp;t=m&amp;ie=UTF8&amp;hq=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;ll=37.422151,-122.083983&amp;spn=0.009543,0.011973&amp;z=15&amp;iwloc=&amp;output=embed"></iframe>
    <br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;aq=0&amp;oq=google&amp;sll=37.418436,-122.075443&amp;sspn=0.093391,0.133381&amp;t=m&amp;ie=UTF8&amp;hq=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;ll=37.422151,-122.083983&amp;spn=0.009543,0.011973&amp;z=15&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small> 
</div>


脚本：

$(".button").click(function () {
$(".map").toggle("blind", 1000);
$(this).text($(this).text() == "Hide map" ? "Show map" : "Hide map");
});

我对 jQuery 比较陌生，因此欢迎任何其他关于如何改进我的方法的评论。谢谢！

4

1 回答 1

1

我重构了上面的代码以使用该slideToggle()方法而不是，toggle("blind", 1000)这似乎已经修复了 iframe 内容的重新调整大小。有了这个，我确实必须重新创建地图位置中心点，以便在展开时它位于 iframe 的正确区域。唯一值得注意的错误是我的 Opera 11.62 浏览器，它在显示地图时没有将地图位置居中。

这是更新的演示：http:
//jsfiddle.net/T7jLf/

HTML：

<button class="button" value="Show map">Show map</button>

<div id="map">
  <iframe class="map" width="280" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;aq=0&amp;oq=google&amp;sll=42.916709,-83.631706&amp;sspn=0.203156,0.303154&amp;ie=UTF8&amp;hq=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;t=m&amp;ll=37.426752,-122.090421&amp;spn=0.009543,0.011973&amp;z=15&amp;iwloc=&amp;output=embed"></iframe>
<br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;aq=0&amp;oq=google&amp;sll=42.916709,-83.631706&amp;sspn=0.203156,0.303154&amp;ie=UTF8&amp;hq=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;t=m&amp;ll=37.426752,-122.090421&amp;spn=0.009543,0.011973&amp;z=15&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>

<p>Some paragraph text can go here...</p>

CSS：

#map {
  display: none;
}
.map {
  margin: .5em .25em;
}

脚本：

$(".button").on("click", function () {
  $("#map").slideToggle("slow");
  $(this).text($(this).text() == "Hide map" ? "Show map" : "Hide map");
});
于 2013-04-23T00:10:50.070 回答