使用AJAX加载Google Maps API ...但多次实例只能使用一次

Question

我写了一个小脚本，它从JSON文件加载Google Maps标记并将它们放置在地图上。该脚本应该能够处理多个实例。目前，该脚本看起来像这样（用于测试我使用this JSON file）：

<div id="map" data-file="test.json" style="width: 200px; height: 200px; "></div> 
<div id="map2" data-file="test2.json" style="width: 200px; height: 200px; "></div> 
<!-- JAVASCRIPT --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script> 
    $(function() { 
     var googleMaps = function() { 
      var $el, 
       apiLoaded = false; 


      // Init 
      // @public 
      function init(el) { 
       $el = $(el); 

       loadData($el.data('file')); 
      }; 


      // Creating a marker and putting it on the map 
      // @private 
      function createMarker(data) { 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(data.lat, data.lng), 
        map: map, 
        title: data.title 
       }); 
      } 


      // JSON file and API loaded 
      // @private 
      function ready(data) { 
       // Basic settings 
       var mapOptions = { 
        center: new google.maps.LatLng(58, 16), 
        zoom: 7, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       map = new google.maps.Map($el[0], mapOptions); 

       // Create markers 
       $.each(data, function(key, value) { 
        createMarker(value); 
       }); 
      } 


      // Load API 
      // @private 
      function loadAPI(callback) { 
       if (typeof google === 'object' && typeof google.maps === 'object') { 
        // API was already loaded 
        if(typeof(callback) === 'function') { 
         callback(); 
        } 
       } else { 
        // API wasn't loaded yet 
        // Send an AJAX request 
        $.ajax({ 
         url: 'http://www.google.com/jsapi/', 
         dataType: "script", 
         success: function() { 
          google.load('maps', '3', { 
           callback: function() { 
            // Check if callback function is set 
            if(typeof(callback) === 'function') { 
             callback(); 
            } 
           }, 
           other_params: 'sensor=false' 
          }); 
         } 
        }); 
       } 
      }; 


      // Load JSON file 
      // @private 
      function loadData(file) { 
       $.ajax({ 
        url: file, 
        success: function(data) { 
         var parsedJson = $.parseJSON(data); 
         loadAPI(function() { 
          ready(parsedJson); 
         }); 
        }, 
        error: function(request, status, error) { 
         // Error 
         console.log(error); 
        } 
       }); 
      }; 

      return { 
       init: init 
      } 
     }   
    }); 
</script> 

它的工作原理，如果我只.init()一个实例，像这样：

googleMaps().init(document.getElementById('map')); 

但只要我尝试多次失败实例：

googleMaps().init(document.getElementById('map')); 
googleMaps().init(document.getElementById('map2')); 

我认为失败是因为.loadAPI()和google.load()功能在一排，我的CHEC获取调用两次如果Google Maps API已经加载失败，Chrome内部.loadAPI()内的k（Chrome Inspector：Uncaught TypeError：Object＃没有方法'Load'（Google Maps API JS文件））。

我如何确保.loadAPI()函数中的AJAX请求没有被调用两次？我可以在我的模块模式之外使用一个全局变量，我将其设置为true，但我并不真正想为此使用它。还有什么我可以使用的？

在此先感谢。

Answer 1

这里可能会出现两个不同的问题。

1. 因为您每次调用googleMaps（）函数，都会创建一个新对象实例，用于跟踪Google地图API何时加载。您需要提取在googleMaps函数之外加载api的部分（或使用共享变量）。
2. 即使您保持loadAPI函数的原样，您仍然可能会遇到竞争情况，其中加载谷歌地图库的ajax请求可以被关闭两次。你看到这个错误的原因是，当你检查loadAPI时，如果google对象可用，它实际上还没有被第一个ajax请求设置。

您可以使用Promise API来处理类似这样的问题。我改变了loadAPI方法使用一个承诺，就像我说的，它需要的GoogleMaps功能

 var loadAPIPromise; 
     // Load API 
     function loadAPI(callback) { 
      if (!loadAPIPromise) { 
       var deferred = $.Deferred(); 
       $.ajax({ 
        url: 'http://www.google.com/jsapi/', 
        dataType: "script", 
        success: function() { 
         google.load('maps', '3', { 
          callback: function() { 
           deferred.resolve(); 
          }, 
          other_params: 'sensor=false' 
         }); 
        } 
       }); 
       loadAPIPromise = deferred.promise(); 
      } 
      loadAPIPromise.done(callback); 
     }; 

这里以外的地方移动的一个例子的jsfiddle http://jsfiddle.net/callado4/gA79R/4/