Wordpress 中的 Google Maps API Javascript

Question

希望你们能回答这个问题！我认为它应该相对容易，但我似乎无法掌握它。

如何在 Wordpress 帖子/页面中加载 Google Maps API Javascript？

Wordpress Codex 似乎建议在主题的标题中引用您的 javascript 文件，然后您需要调用帖子中的函数。

我在标题中引用了 Google Javascript 文件，如下所示：

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

然后将所有 API 代码也放入我的 javascript 文件：

<script type="text/javascript" src="http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js"></script>

然后我在帖子中使用了以下代码：

<script type="text/javascript" src="http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js">
</script>
<script type="text/javascript">
</script>
<div id="map-canvas">
</div>

但这只会创建一个空框。我已经尝试在帖子中调用预定义的 Google JS 函数，但这似乎也不起作用。

是否有人已经在 Wordpress 上实施了 Google 地图？我可以将所有代码直接粘贴到帖子中，但谷歌地图出现了很多错误。

任何想法将不胜感激！ 非常感谢。

Answer 1

使用 WordPress，您永远不应该将 js 硬编码到页眉或页脚中。而是在函数中使用wp_enqueue_script，该函数与functions.php 中的wp_enqueue_scripts 操作挂钩。例如：

function add_scripts() {
  wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false');
  wp_enqueue_script('google-jsapi','https://www.google.com/jsapi');     
}
add_action('wp_enqueue_scripts', 'add_scripts')

您可能希望在函数名称前加上一个唯一的 slug。您可以添加依赖项版本号或将其移动到带有其他变量的页脚，请参阅 codex 以获取更多信息。在您的情况下，您可能希望将wp_enqueue_script 包装在一个条件中，以便它只加载到您需要它的帖子或页面上。

Answer 2

我刚刚看了你的http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js 文件

你不应该在里面有<script>标签！

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

我建议您查看 javascript 控制台以了解错误并学习使用 wp_enqueue_script() 将 javascript 添加到您的页面。