无法将 Google Maps JS API 排入 WordPress

Question

我对 WordPress 还很陌生，我正在学习有关主题开发的 Udemy 课程，其中一部分涉及使用 Google 地图 API。当我注册/排队脚本时，在查看页面时它不会出现在 HTML 源代码中。开发者控制台也没有错误。

这是我的

functions.php

的片段：

    wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(''), '', true);
    wp_register_script('fluidboxjs', get_template_directory_uri() . '/js/jquery.fluidbox.min.js', array('jquery'), '2.0.5', true);
    wp_register_script('script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0', true);

    wp_enqueue_script('googlemaps');
    wp_enqueue_script('jquery');
    wp_enqueue_script('fluidboxjs');
    wp_enqueue_script('script');
}

add_action('wp_enqueue_scripts', 'lapizzeria_styles');

这是页脚下方输出的 HTML（我相信我应该在这里看到 Google API 的链接）：

<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/jquery.fluidbox.min.js?ver=2.0.5'></script>
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/scripts.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-includes/js/wp-embed.min.js?ver=4.7.4'></script>

有趣的是，当我入队时，这条线确实出现在头部

googlemaps

：

<link rel='dns-prefetch' href='//maps.googleapis.com' />

作为这个问题的一些背景知识：

练习的第一步是将 Google 的示例代码（脚本和样式）直接放入

front-page.php

中，地图显示得很好。

第二步是将代码从

front-page.php

中移出，并将其放入

functions.php

、

scripts.js

和

style.css

中。

将样式移动到

style.css

效果很好。将

initMap()

功能移至

scripts.js

效果很好。但是，当尝试在

functions.php

中排队/注册 Google Maps API 时，它似乎没有像其他排队项目那样在页脚下添加 Maps API 的

<script>

。

我不确定这是否有什么不同，但我在本地工作并运行 MAMP。我尝试清除浏览器缓存并使用其他浏览器。我尝试过更改它的排队顺序。

编辑： 我注意到的一件事是，如果我为

googlemaps

添加依赖项，它确实会打印我期望的

<script>

标签，但会在控制台中显示此错误：

initMap is not a function

。我的理解是 Google Maps API 不应该需要 jQuery 才能工作，所以我不确定这些额外信息是否相关。

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&#038;callback=initMap&#038;ver=4.7.4'></script>

上面一行中出现的

#038;

可能有什么可疑之处？

如有任何帮助，我们将不胜感激！

Answer 1

我怀疑该问题是由于为

googlemaps

设置的依赖关系造成的。该数组包含一个空字符串，而不是传递一个空数组来指定脚本的无依赖项。无法满足依赖关系，因此未加载脚本。

只需将

array('')

替换为

array()

。

wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(), '', true);

Answer 2

只需将 array('') 替换为 NULL。请根据示例修改您的查询。 在 &key=

之后添加地图键

wp_register_script('googlemaps', '//maps.googleapis.com/maps/api/js?&key=', NULL, 1.0, true);