-1

我的页面上有同一张地图的两个版本：一个通过 CSS 变小并显示在侧边栏中。另一个更大，当单击覆盖在小地图顶部的 png 时，它会在灯箱中打开。该网站建立在 Drupal 之上。小地图在一个块中，大地图在自己的节点页面上。这两个内容项都引用了 Google 地图 API js 文件。

当我单击侧边栏地图链接时，Chrome 的错误控制台告诉我“警告：您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。”。我尝试从灯箱地图中删除 Google 地图 API js 引用，但是当我单击侧边栏地图链接时，它根本不显示大地图。当两个地图都具有 Google Maps API js 时，它在 FireFox 中一切正常；它不适用于 IE、Chrome 和 Safari。

关于如何让它正常工作的任何提示？当点击链接并且大地图在灯箱中打开时，有没有办法动态“杀死”小侧边栏地图的js？

4

1 回答 1

2

如消息所述，您应该只包含一次 API。您可以通过一次 API 加载创建任意数量的地图实例。

由于您总是加载小地图，因此一种简单的解决方案是简单地删除 Maps API<script>标记或drupal_add_js()从创建大灯箱地图的节点调用。当然，如果您将其作为独立页面打开，您将无法再查看该节点中的地图；它只能作为已经包含 Maps API 的页面的一部分。

或者，您可以有条件地在页面上仅包含一次 Maps API 脚本。我的 PHP 和 Drupal 编码有点生疏，但我认为它看起来像这样：

if( ! $mapsApiLoaded ) {
    $mapsApiLoaded = TRUE;
    drupal_add_js(
        'https://maps.googleapis.com/maps/api/js?sensor=false',
        'external'
    );
}

在您的块和节点中使用该代码而不是裸drupal_add_js()调用或<script>标记，它应该只加载一次 API。

（当然，如果您正在进行车辆跟踪等，sensor=false应sensor=true按照Maps API 服务条款的要求阅读）。

或者这里是另一种在 Drupal 中加载 .js 文件的方法。

有趣的是，多年前曾讨论过在函数中添加“仅加载一次”drupal_add_js()功能，但它被解决为“wontfix”。:-(

你也可以在纯 JavaScript 中做类似的事情。在检查尚未加载后，只需使用为 Maps APIdocument.write()编写标签：<script>

<script>
    function loadMapsAPI() {
        if( window.google && google.maps )
            return;
        document.write(
            '<script src="',
                'https://maps.googleapis.com/maps/api/js',
                '?v=3&sensor=false',
            '">',
            '<\/script>'
        );
    }
</script>

测试它：

<script>
    loadMapsAPI();
</script>

<script>
    loadMapsAPI();
</script>

<script>
    // Normal Maps API initialization code here
</script>

请注意，您不能这样做：

<script>
    loadMapsAPI();
    // Normal Maps API initialization code here
</script>

这是因为document.write()in在当前标签之后loadMapsAPI()写出 API 的<script>标签。因此，如果您将该调用和地图初始化的其余部分放在同一个标​​签中，它们的顺序将是错误的：<script><script>

<script>
    loadMapsAPI();
    // Normal Maps API initialization code here
</script>
... The Maps API <script> generated by document.write is *here* ...

将loadMapsAPI()函数定义和调用合并在同一个<script>标​​签中就可以了：

<script>
    function loadMapsAPI() {
        if( window.google && google.maps )
            return;
        document.write(
            '<script src="',
                'https://maps.googleapis.com/maps/api/js',
                '?v=3&sensor=false',
            '">',
            '<\/script>'
        );
    }
    loadMapsAPI();
</script>

甚至不让它成为一个函数：

<script>
    if( !( window.google && google.maps ) ) {
        document.write(
            '<script src="',
                'https://maps.googleapis.com/maps/api/js',
                '?v=3&sensor=false',
            '">',
            '<\/script>'
        );
    }
</script>

然后，您将<script>在需要的地方重复该标签。

现在，如果您<script>从 PHP 代码生成这些标签，可能需要担心更多的转义和引用，但我会让您弄清楚这部分，因为我不是 PHP 专家。

于 2013-07-26T16:31:04.050 回答