Question

我是异步加载Google地图，但似乎我的代码是在加载Goole Maps之前执行的。

Brand.init();

var Brand = {
  stores: [],

  init: function(){
    // Load Google Maps with callback
    GoogleMaps.loadGoogleMapScript(Brand.setMarkers());

  },

  setMarkers: {
    GoogleMaps.setMarkers(stores);
  }
}

var GoogleMaps = {
    loadGoogleMapScript: function(callback) {

        if (typeof google === 'undefined') {

            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'https://maps.googleapis.com/maps/api/js?callback=' + callback + '&key=' + config.googleApiKey;
            document.body.appendChild(script);

        } else {
            callback;
        }
    },

    setMarkers: function(stores){

      if (typeof google === 'undefined') {
            console.log('GM is undefined');
            setTimeout( function () {
                GoogleMaps.setMarkers(stores);
            }, 500);
      }

      // Even if 'google' is not defined, it still executes the below code
      // and gives 'google is not defined'
      var bounds = new google.maps.LatLngBounds();
    }
}

非常感谢任何关于如何解决这个问题的建议。

Answer 1

你有：

GoogleMaps.loadGoogleMapScript(Brand.setMarkers());

实际调用Brand.setMarkers，你没有传递引用，你传递函数调用的返回值。我甚至不知道它是否作为有效函数传递，也许它是ES6速记函数声明的一部分？：

setMarkers: {
    GoogleMaps.setMarkers(stores);
  }

如果调用该函数，它将一直转到bounds变量声明，该声明将尝试访问尚未定义的google.maps。

另外，请注意，API提供的callback参数是一个包含要调用的函数的字符串，而不是您通常的函数引用（当您连接它时，它仍然被转换为字符串）。加载脚本标记后，它将调用此参数中提供的函数名称。

function callMe(){
  $('#results').html(JSON.stringify(google.maps, null, '\t'));
  }
var string = "<script async defer src=\"https://maps.googleapis.com/maps/api/js?callback=callMe\"></scr" + "ipt>";
$(string).appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="results"></pre>

为什么我得到谷歌没有定义＆＃39;什么时候异步加载谷歌地图？

1 个答案: