异步加载谷歌地图

Question

我正在尝试异步加载谷歌地图，它可以正常工作，但会加载两次地图。如果我删除“box.onload = initialize;”，则可以解决此问题，但是信息框不会显示...如何修复代码以仅加载一次地图并显示信息框？

function loadScript() {
   var map = document.createElement('script');
   map.type = 'text/javascript';
   map.src = 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=initialize';
   document.body.appendChild(map);  

   map.onload = function() {
      var box = document.createElement('script');
      box.type = 'text/javascript';
      box.src = 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js';
      document.body.appendChild(box);
      box.onload = initialize;
   };
}           
window.onload = loadScript;

- green_arrow

---

从您的map.src中删除回调。 - duncan

这会完全阻止地图的工作 :( - green_arrow

问题在于我觉得你最终会调用两次“initialize”。也许box.onload应该调用另一个函数。 - duncan

那正是我所想的，也是我卡住的地方 :( - green_arrow

也许将您的初始化函数添加到问题中会很有用。 - duncan

Answer 1

地图出现两次是因为你调用了initialize两次。

在修复之前，让我们简化一下你的代码。不要让自己重复那些代码块，而是将其制作成一个常用函数。

另外，不要从googlecode.com加载infobox.js；Google Code不是CDN。请加载你自己的副本。

所以，代码可能是这样的:

function addScript( url, callback ) {
    var script = document.createElement( 'script' );
    if( callback ) script.onload = callback;
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild( script );  
}

function loadMapsAPI() {
    addScript( 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=mapsApiReady' );
}

function mapsApiReady() {
    addScript( 'infobox.js', initialize );
}

window.onload = loadMapsAPI;

- Michael Geary

---

谢谢！这完全解决了我的问题:D - green_arrow

应该是这样写的：'addScript( 'infobox.js', initialize );'，不是那样的 ;) - Steve de Niese

@LetterAfterZ - 哦！谢谢！ :-) - Michael Geary

@MichaelGeary 最好的答案！其他方法都没有对我起作用。谢谢 ;) - alex89x

Answer 2

我创建了这个脚本。你可以调用它并添加任何回调函数，所以你只需要将其包含在你的脚本中并调用它。

googleMapsLoadAsync(function(){ alert('谷歌地图已加载'); });

脚本

var googleMapsAsyncLoaded = false;
var googleMapsAsyncCallback = function(){ };

function googleMapsLoadAsync(callback) {

    if (typeof callback !== 'undefined') { googleMapsAsyncCallback=callback; }

    if(!googleMapsAsyncLoaded) {

        $.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=googleMapsAsyncLoadedFunction');

    } else {

        googleMapsAsyncLoadedFunction();

    }

}

function googleMapsAsyncLoadedFunction() {

    googleMapsAsyncLoaded = true;

    if(googleMapsAsyncCallback && typeof(googleMapsAsyncCallback) === "function") {

        googleMapsAsyncCallback();

    }

    googleMapsAsyncCallback = function(){ };

}

- Jan Šafránek