Question

我遇到了与here, with an embedded Google Map being offset相同的问题，并且不是非常精通javascript的，我对如何以理想的方式解决这个问题感到茫然。

我正在使用jQuery Tools库为我的用户制作各种“向导”，如下所述：http://flowplayer.org/tools/demos/tabs/wizard.html

该向导的一个窗格具有嵌入式Google Map。该地图存在OP中提到的问题。

为了防止向导的所有窗格的闪存在jQuery Tools脚本隐藏它们之前最初可见，我给窗格提供了“display：none”的CSS属性（第一个窗格除外）。这是问题的根本原因 - 在CSS中注释掉该行会导致窗格暂时可见，并且嵌入式Google Map正常工作。

我的问题很简单：如何在正确的jQuery / javascript中呈现以下伪jQuery代码？

when (.pane.hasMap).css("display") == "block"
{
    load/run external google-maps.js file
}

另外，每当用户使用地图切换到窗格时，我是否需要它才能运行？或者只是第一次？

编辑：

Gah ......我刚刚发现我的CMS的谷歌地图插件会自动将脚本插入到我手动（并且冗余，事实证明）指定脚本的页面之上。所以，我无法控制何时调用脚本并渲染地图。

因此，我能想到的唯一选择是将地图的容器放在离屏的位置，然后在调用选项卡时将其恢复到原位。这可能是这样的事情吗？：

if ( $(".pane.hasMap").is(':visible') ) {
    $(".mapContainer").css("top", "0", "left", "0");
}

Answer 1

如果有什么东西可以做某事：

if ( $(".pane.hasMap").is(':visible') ) {
    $.getScript("https://apis.google.com/js/google-maps.js", function () {
          //execute maps here;
    });
}

如果您使用jQuery来显示隐藏的元素，那么在您将这些元素显示的同时获取脚本可能会更好，如下所示：

$(".pane.hasMap").show('slow', function() {
    $.getScript("https://apis.google.com/js/google-maps.js", function () {
          //execute maps here;
    });
});

在元素的CSS属性更改后调用外部.js文件

1 个答案: