Question

我无法使用任何提供的答案解决此问题。为什么这仍然被投票？

我正在使用Roots.io中的Sage主题

我已将Google Maps API排列为：

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&callback=initMap', [], null, true);
  }

}

然后我在控制台中收到此错误：

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

为了尝试解决这个问题，我尝试重新排序上面的enques，我也尝试在initMap()周围移动Main.js函数。

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() {
        // JavaScript to be fired on all pages
        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!'
          });
        }

      },

我找到了this，所以我尝试添加

google.maps.event.addDomListener(window, 'load', initMap);

initMap()函数之前和之后。我认为这可能与范围有关，我该如何解决这个问题？

更新：在Sage对象外部定义函数不会解决此问题

(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!'
  });
});
/* ========================================================================
 * DOM-based Routing
 * Based on link by Paul Irish
 *
 * Only fires on body classes that match. If a body class contains a dash,
 * replace the dash with an underscore when adding it to the object below.
 *
 * .noConflict()
 * The routing is enclosed within an anonymous function so that you can
 * always reference jQuery with $, even when in .noConflict() mode.
 * ======================================================================== */

(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() {
        // JavaScript to be fired on all pages 
          if (!$('body').hasClass('home')) {
            $(this).find('.banner').removeClass('navbar-fixed-top');
          }
      },

Answer 1

initMap必须是全局函数。目前，其范围仅限于init函数内Sage对象内的function($) {}函数。你可以做这样的事情来解决这个问题。

window.initMap = function() {
  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!'
  });
};

Answer 2

确保initMap函数是全局的，或者作为回调传递给google maps.js的参数是正确的。

尝试关注，

'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!'
          });
        })
      },

InvalidValueError：initMap不是函数？

2 个答案: