使用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/