javascript - Wordpress 中的 Google Maps API Javascript

Question

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

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

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

我在 header 中引用了 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">

然后到我的 javascript 文件，标题中也包含所有 API 代码:

<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 map ？我可以将所有代码直接粘贴到帖子中，但 Google map 出现了很多错误。

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

Answer 1

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

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。您可以添加依赖项版本号或使用其他变量将其移动到页脚，请参阅法典以获取更多信息。在您的情况下，您可能希望将 wp_enqueue_script 包装在条件中，以便它仅加载到您需要它的帖子或页面上。