4

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

您如何在 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">

然后到我的 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 上实施谷歌地图已经这样做了？我可以将所有代码直接粘贴到帖子中，但谷歌地图出现了很多错误。

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

4

2 回答 2

14

使用 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一个条件，以便它只加载到您需要它的帖子或页面上。

于 2013-05-09T14:40:47.033 回答
0

我刚刚看了你的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 添加到您的页面。

于 2013-04-25T05:11:38.780 回答