谷歌地图iFrame在标签问题上

时间：2014-01-02 作者：Ciarán

我在页面的第三个选项卡上嵌入了地图。

Page here > \'“行程”选项卡

如果在页面仍在加载时直接转到选项卡，则可以完美地加载地图。但是，如果您等到页面完全加载完毕，然后单击“行程”选项卡，则地图将完全缩小，而不是加载到应放在的位置。

我尝试输入所有细节，如

<iframe src="http://ridewithgps.com/routes/1342529/embed" height="500px" width="100%" frameborder="0" http://maps.google.com/maps?ll=43.790716,4.166708&z=8&t=m&hl=en-GB&gl=US&mapclient=apiv3&skstate=action:mps_dialog$apiref:1&output=classic></iframe>
但对我来说还是不行。我对Javascript知之甚少，但我猜需要将其重新加载到选项卡或其他东西上，才能使其放大。

3 个回复
最合适的回答,由SO网友:shahpranaf 整理而成

您正在选项卡结构中使用iframe。因此，当页面完全加载时，ITenery选项卡中的iframe将显示none。因此，它没有正确加载缩放的地图
2）当您在加载完成之前切换到ITenery选项卡时，iframe是显示块，即可见，因此它可以正确加载url/映射。

因此，您可以为iframe提供id，比如“#itenary\\u map”。并在单击iTenery选项卡时重新初始化iframe，如下所示


var iframe = document.getElementById("itenary_map");
iframe.src = iframe.src;
Update:
您可以在main中使用以下jQuery代码。js。
jQuery(\'#section-tabs-header li:nth-child(3)\').click(function() { //click on itenary tab



if( !jQuery( \'#itenerary_map\' ).find(\'iframe\').hasClass(\'clicked\') ){//Check if its clicked once or else will reload iframe on every click
        jQuery( \'#itenerary_map\' ).find(\'iframe\').attr( \'src\', function ( i, val ) { return val; });

jQuery( \'#itenerary_map\' ).find(\'iframe\').addClass( \'clicked\' ); // add any class to say its clicked
    }
});

您可以通过为iframe提供类或id来修改js上面的内容。我以概括的形式写了这篇文章。

SO网友:user3079356

出色的响应-只是遇到了一些类似的问题，并进一步改进，使其更具普遍性：

jQuery().ready(function($) {
    $(\'.tabs\').tabs();
    $(\'.tabs li\').not(\':first\').click(function() { 
        tab_id=$(this).children(\'a\').attr(\'href\');
        iframe_id=$(tab_id).children(\'iframe\').attr(\'id\');
        if (!$(\'#\'+iframe_id).hasClass(\'clicked\')) {
            $(\'#\'+iframe_id).attr(  \'src\', function ( i, val ) { return val; });
            $(\'#\'+iframe_id).addClass( \'clicked\' ); // add a class to say its clicked
        }
    });
});

SO网友:Edmiel Leandro

对我来说，修复方法是为页面中的所有iFrame添加默认宽度样式：

iframe {
    width: 100% !important;
}

结束
标签： javascript   embed   google-maps   tabs   小码农  

相关推荐

如何在WordPress中包含调整大小的javascript/jQuery图像？

我不想在我的wordpress主题中包含此脚本，使其根据当前窗口高度调整帖子内所有图像的大小：https://github.com/gutierrezalex/photo-resize我在文本编辑器中创建了一个基本的测试页面，它可以很好地调整图像的大小。然而，当我试图将其应用/包括在我的wordpress主题中时，我根本无法使其发挥作用。