为什么我在我的JavaScript主题中会出现Google错误？
在尝试将Google添加到WordPress主题时，我遗漏了一些东西。当我使用插件调试条进行WordPress开发时，它会抛出一个JavaScript错误：
Script error.
line 0我不知道问题在哪里，在做了研究之后，我认为我的问题是在调用Map的API时没有async defer：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>阅读后：
为了解决我认为是问题的问题，我进行了研究，然后偶然发现：
- 如何在插件javascripts中添加defer=“延迟”标记？
- https://wordpress.stackexchange.com/questions/38319/how-to-add-defer-defer-tag-in-plugin-javascripts
- 脚本加载器标签
functions.php代码
function call_the_js_files() {
if (is_page_template('page-foo.php')) :
wp_enqueue_script( 'google_api', 'https://maps.googleapis.com/maps/api/js?key=AP_KEY&callback=initMap', array( 'jquery' ), '', true );
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
if ( 'google_api' !== $handle )
return $tag;
return str_replace( ' src', ' async defer src', $tag );
}, 10, 2 );
wp_enqueue_script( 'google_map', get_template_directory() . '/js/google.js', array( 'jquery' ), '', true );
endif;
add_action( 'wp_enqueue_scripts', 'call_the_js_files' );google.js代码
( function( $ ) {
$(function initMap() {
var uluru = {
lat: 11111111,
lng: 222222222
};
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 15,
center: uluru
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: uluru,
map: map,
icon: iconBase + 'parking_lot_maps.png'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
});
} )( jQuery );当我查看源时，我得到：
<script type='text/javascript' async defer src='https://maps.googleapis.com/maps/api/js?key=API_KEY;callback=initMap'></script>
<script type='text/javascript' src='site/location/for/js/google.js'></script>但是我仍然在调试栏中被抛出一个错误。我是不是错过了什么或者做错了什么？我对地图的渲染没有问题，我遇到的唯一问题就是JavaScript错误。在开发工具中，我在Google上的当前API设置设置为None，但受到限制。
当我深入研究google map script error line 0时，我遇到了Onion.js中的Google脚本错误，但我已经在header.php中运行了<meta http-equiv="X-UA-Compatible" content="IE=edge">。
回答 3
Stack Overflow用户
发布于 2016-11-12 22:31:20
使用斯蒂芬的回答，我最终瞄准了wp_footer，并包含了JavaScript，而不是从外部文件中调用它，因为这就是谷歌的例子。
这是代码，我希望它能帮助到其他人：
function call_the_js_files() {
if (is_page_template('page-foo.php')) :
?>
<script type='text/javascript'>
function initMap() {
var uluru = {
lat: 11111111,
lng: 222222222
};
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 15,
center: uluru
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: uluru,
map: map,
icon: iconBase + 'parking_lot_maps.png'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}
</script>
<?php
wp_enqueue_script( 'google_api', 'https://maps.googleapis.com/maps/api/js?key=AP_KEY&callback=initMap', array( 'jquery' ), '', true );
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
if ( 'google_api' !== $handle )
return $tag;
return str_replace( ' src', ' async defer src', $tag );
}, 10, 2 );
endif;
add_action( 'wp_footer', 'call_the_js_files' );Stack Overflow用户
发布于 2016-11-12 05:16:29
将您的functions.php更改为包含以下内容。google依赖于您的脚本。
<?php
function theme_js() {
wp_enqueue_script( 'gmap', '//maps.googleapis.com/maps/api/js?key=YOuR_KEY&callback=initMap', array ('theme_js'), '1.0', true );
wp_register_script( 'theme_js', get_stylesheet_directory_uri() . '/js/hotelloc.js', array(), '1.0', true );
}
add_action('wp_footer', 'theme_js');
?>Stack Overflow用户
发布于 2016-11-11 21:35:23
好的，我想问题是在
( function( $ ) {
$(function initMap() {这是抛出一个错误，因为您不能定义这样的函数。替换为
( function( $ ) {
function initMap(){
.....
}
} )( jQuery );https://stackoverflow.com/questions/40555887
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号