Question

我在尝试将Google地图添加到WordPress主题时遗漏了一些内容。当我使用插件Debug Bar进行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>

阅读后：

Step 2: Add a map with a marker

我研究解决了我认为的问题并且遇到了问题：

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下进一步研究时，我遇到了Google Maps Script error in Onion.js，但我已经在我的header.php中运行了<meta http-equiv="X-UA-Compatible" content="IE=edge">。

Answer 1

将您的functions.php更改为包含以下内容。谷歌地图api依赖于您的脚本。

<?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');


?>

Answer 2

好吧我认为问题出在

&gt;

这会引发错误，因为你无法定义这样的函数。将其替换为

( function( $ ) {
$(function initMap() {

Answer 3

使用Stephen's answer我最终定位wp_footer并包含JavaScript，而不是通过外部文件调用它，因为这就是Google的示例。

这是代码，我希望它可以帮助别人：

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' );

为什么我的WordPress主题中出现了Google Map JavaScript错误？

3 个答案: