javascript - 为什么我在异步加载 Google map 时收到 'google is not defined'？

Question

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

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>