0

我永远无法通过提供的任何答案解决此问题。为什么这仍然被否决？

我正在使用来自 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!'
          });
        }

      },

我确实找到了这个，所以我尝试添加

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

2 回答 2

2

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!'
  });
};
于 2016-09-29T12:26:27.600 回答
0

确保 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!'
          });
        })
      },
于 2016-09-29T12:29:25.833 回答