我有一个包含隐藏<div>使用display: none;的网页,我在页面上有一个按钮,单击该按钮将更改其可见性<div>,并将其覆盖在其他所有内容上(因为它具有z-index集).
在此范围内<div>,我使用iFrame嵌入了谷歌地图,谷歌地图引脚被放置在我试图向我的用户显示的位置.
因为Google地图iFrame正在加载页面加载并且<div>隐藏时,这意味着当<div>显示Google地图未正确对齐时(图钉和中心位置现在位于左上角)
我知道有些人可能会告诉我"应该"重新整理整个页面的方法.我实际上正在寻找的是onClick我可以设置的某种功能,它将重新加载iFrame,以便地图正确居中.
这个iframe有一个Google Maps页面作为其src.即URL而不是我站点中文件的链接.
任何帮助将不胜感激!我在网上搜索的很多代码似乎都在刷新引用的特定文件而不是外部URL.
如果我将地图嵌入另一个HTML文件,然后将该HTML文件作为框架源放置,它会起作用吗？
小智 16
我有这个类似的问题,并通过jquery更改div的CSS样式,并更改我放置谷歌地图的iframe的地方解决了它.
jquery代码:
<script type="text/javascript">
$(function(){
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
});
});
</script>
HTML:我将链接和谷歌地图iframe内嵌到带有display:none css样式的div中.因为display:none样式使div宽度为0,高度为0,所以google map中请求的地址无法正常显示.
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none">google_map_iframe_here</div>
jquery代码
<script type="text/javascript">
$(function() {
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
$("#map").html('google_map_iframe_here').css('display','block');
});
});
</script>
HTML:我以前用于放置地图的div是空的,因为我只在点击链接时才加载地图,此时我将css样式从display:none改为display:block,所以地图显示好.
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none"></div>
希望这可以帮助!有一个很好的编码日!
我没有使用iframe(我正在使用Google Maps API的第3版),但由于"隐藏"div而导致"不正确对齐"问题.我的修复,而不是使用display:none,它完全从DOM中删除它,我使用了可见性和高度,如下所示:
.myMapDiv {
visibility: hidden;
height: 0px;
}
我相信发生的事情是因为'visibility:hidden'实际上将元素保留在DOM中,所以地图能够按预期呈现.我已经在FF/Chrome/IE 7-9中测试了它,并且似乎到目前为止没有问题.
小智 2
在互联网上搜索了几个小时但没有得到任何结果后，我决定尝试一下我在问题的最后附注中添加的内容，结果成功了！
我只是创建了第二个文件，名为map.html，里面的代码实际上是：
<html>
<iframe> </iframe>
</html>
显然是 Google 地图源，然后在我的主页中，我将srciframe 链接到pages/map.html而不是 Google 地图链接。
| 归档时间： |
|
| 查看次数： |
25800 次 |
| 最近记录： |