dongzhengzhong1282
2016-09-29 18:22 阅读 57
已采纳

如何正确排列地图?

I'm using the Root's theme - Sage

I'm trying to enqueue Google Maps, been at it for hours with no success.

I keep getting this error in Chrome's console:

Uncaught InvalidValueError: initMap is not a function ... js?key=MY_API_KEY&callback=initMap:95

From what I can work out, it means that it can't find the function like the classic jQuery undefined problem of script ordering.

setup.php

/**
 * Theme assets
 */

function assets() {
  wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null);

  wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', false, null);

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }
  wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);

  wp_enqueue_script('jquery-validate', '//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js', [], null, true);

  if (is_page_template('template-about.php')) {
    wp_enqueue_script('google-maps', '//maps.googleapis.com/maps/api/js?key=MY_API_KEY_HERE&callback=initMap', [], null, true);
  }

}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\assets', 100);

Excerpt of my Main.js

(function($) {
  // Use this variable to set up the common and page specific functions. If you
  // rename this variable, you will also need to rename the namespace below.
  var Sage = {
    // All pages
    'common': {
          init: function() {

            if (!$('body').hasClass('home')) {
              $(this).find('.banner').removeClass('navbar-fixed-top');
            }

           var map;
           console.log('reached');

            function initMap() {
              var location = {lat: 51.47672559, lng: -3.17107379};
              var markerloc = {lat: 51.476852, lng: -3.167869};
              map = new google.maps.Map(document.getElementById('map'), {
                 center: location,
                 scrollwheel: false,
                 zoom: 17
              });
              var marker = new google.maps.Marker({
                 position: markerloc,
                 map: map,
                 title: 'Hello World!'
              });

          }
        }
          },

Line 106 is the googlemaps url line. Specifically the &callback=initMap part.

Scripts appear like this in the DOM.

<script type='text/javascript' src='//maps.googleapis.com/maps/api/js?key=MY_API_KEY_HERE&#038;callback=initMap'></script>

<script type='text/javascript' src='//localhost:3000/app/themes/***********/dist/scripts/main.js'></script>

Can anyone help me out here?

I have been told this but I'm unsure on how to do it?

Most likely what's happening here is that google-maps ends up enqueued after sage/js. Your conditional block should account for that and add google-maps as a dependency for sage/js.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    doupin1073 doupin1073 2016-09-29 19:01

    As charlietfl stated about dependencies

    wp_enqueue_script('google-maps', '//maps.googleapis.com/maps/api/js?key=MY_API_KEY_HERE&callback=initMap', ['sage-js'], null, true);
    

    I needed to add 'sage-js' as a dependency to maps.

    点赞 评论 复制链接分享

相关推荐