Wordpress 中的 Google Maps API Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16203618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API Javascript in Wordpress
提问by wowzimmer
Hope you guys can answer this question! I'm thinking it should be relatively easy but I just can't seem to get to grips with it.
希望大家能回答这个问题！我认为它应该相对容易，但我似乎无法掌握它。
How do you go about loading the Google Maps API Javascript within a Wordpress post/page?
您如何在 Wordpress 帖子/页面中加载 Google Maps API Javascript？
The Wordpress Codex would seem to suggest that having referred to your javascript file in the header of your theme you then need to call the functions within the post.
Wordpress Codex 似乎建议在主题标题中引用您的 javascript 文件，然后您需要调用帖子中的函数。
I've referred to the Google Javascript files in the header as follows:
我在标题中提到了 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">
and then to my javascript file with all the API code in the header too:
然后到我的 javascript 文件，标题中也包含所有 API 代码：
<script type="text/javascript" src="http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js"></script>
I've then used the following code in the post:
然后我在帖子中使用了以下代码：
<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>
But this just creates an empty box. I've tried calling the predefined Google JS functions within the post but this doesn't appear to have worked either.
但这只会创建一个空框。我试过在帖子中调用预定义的 Google JS 函数，但这似乎也不起作用。
Is there anybody implementing Google Maps on Wordpress that has already done this? I can paste all the code directly into the post but the Google Map comes out full of bugs.
有没有人在 Wordpress 上实现谷歌地图已经这样做了？我可以将所有代码直接粘贴到帖子中，但谷歌地图出现了很多错误。
Any ideas would be greatly appreciated! Many thanks.
任何想法将不胜感激！非常感谢。
回答by JPollock
With WordPress you should never hard code js into the header or footer. Instead use wp_enqueue_scriptinside a function hooked into the wp_enqueue_scriptsaction in functions.php. For example:
使用 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')
You would want to prefix the function name with a unique slug. You could add dependencies version numbers or move it to the footer with additional variables, see the codex for more info. In your case you probably want to wrap wp_enqueue_scriptin a conditional so it only loads on the posts or pages you need it for.
您可能希望使用唯一的 slug 作为函数名称的前缀。您可以添加依赖项版本号或将其移动到带有附加变量的页脚，有关更多信息，请参阅代码。在您的情况下，您可能想要包装wp_enqueue_script一个条件，以便它只加载到您需要它的帖子或页面上。
回答by RRikesh
I just had a look at your http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.jsfile
我刚刚看了你的http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js文件
you shouldn't have <script>tags in that!
你不应该有<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">
I would suggest you to have a look at the javascript console for errors and learn using wp_enqueue_script()to add javascript to your pages.
我建议您查看 javascript 控制台中的错误并学习wp_enqueue_script()如何将 javascript 添加到您的页面。
