谷歌MapAPI JavaScript在WordPress中

wtzytmuj  于 5个月前  发布在  WordPress
关注(0)|答案(2)|浏览(60)

希望你们能回答这个问题!我想这应该是相对容易的,但我似乎无法掌握它。
如何在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上实现谷歌Map已经做到了这一点?我可以直接粘贴所有的代码到后,但谷歌Map出来充满了错误。
任何想法将不胜感激!非常感谢。

rqqzpn5f

rqqzpn5f1#

在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 Package 在条件中,以便它仅加载到您需要它的帖子或页面上。

yyyllmsg

yyyllmsg2#

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

相关问题