未捕獲參考錯誤：mapboxgl未定義

我動態加載Mapbox-GL JS這樣：未捕獲參考錯誤：mapboxgl未定義

 var script = domConstruct.create("script"); 
     script.type = "text/javascript"; 
     script.charset = "utf-8"; 
     script.onload = instantiateMap(); 
     script.src = "https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"; 
     script.async = false; 
     document.getElementsByTagName("head")[0].appendChild(script);

然後在某個時候，我訪問它作爲「instantiateMap」功能如下：

 mapboxgl.accessToken = 'pk.eyJ1IjoibW11a2ltIiwiYSI6ImNqNnduNHB2bDE3MHAycXRiOHR3aG0wMTYifQ.ConO2Bqm3yxPukZk6L9cjA'; 
     var map = new mapboxgl.Map({ 
     container: mapParent, 
     style: 'mapbox://styles/mapbox/streets-v9' 
     });

只要我控制到達線路（mapboxgl.accessToken ...）這讓我在Chrome控制檯以下錯誤：

Uncaught ReferenceError: mapboxgl is not defined 
    at Object._instantiateMap (VM2337 Sample.js:282) 
_instantiateMap @ VM2337 Sample.js:282

這個特殊的代碼片段工作在下列情況下，罰款： - 包括Mapbox-GL.js動態也是一個獨立的HTML文件正常工作。 - 將靜態庫包含在HTML文件中。

我知道，庫加載很好，因爲我看到它在源下的左側面板中，但我不知道，爲什麼在訪問mapboxgl對象，這個錯誤出現。

而且我已經嘗試包括以類似的方式其他庫（jQuery的，mapbox.js），他們工作得很好。

任何幫助將不勝感激！

來源

2017-09-13 user3455358

我覺得「然後在某個時候」是你的問題。你需要確保腳本在你做任何事之前運行。 –

UPDATE：原因是在道場加載器加載之前，我試圖加載腳本，並因爲這裝載機是現在負責加載腳本前進，它承認Mapbox-GL是不是AMD模塊，因此它不會加載它正確。另外，我正在使用Dojo'require'來動態加載腳本。 – user3455358

在沒有看到源代碼，我無法測試或修復錯誤。

我的猜測是，該腳本也不是因爲劇本的大小或代碼的順序的實例之前加載。

我會親自使用回叫功能是爲了確保只有實例化時發生文件被完全下載（未測試）

JavaScript.load("https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js", function() { 
     mapboxgl.accessToken = 'pk.eyJ1IjoibW11a2ltIiwiYSI6ImNqNnduNHB2bDE3MHAycXRiOHR3aG0wMTYifQ.ConO2Bqm3yxPukZk6L9cjA'; 
     var map = new mapboxgl.Map({ 
     container: mapParent, 
     style: 'mapbox://styles/mapbox/streets-v9' 
     }); 
    }); 

    var JavaScript = { 
     load: function(src, callback) { 
     var script = document.createElement('script'), 
      loaded; 
     script.setAttribute('src', src); 
     if (callback) { 
      script.onreadystatechange = script.onload = function() { 
      if (!loaded) { 
       callback(); 
      } 
      loaded = true; 
      }; 
     } 
     document.getElementsByTagName('head')[0].appendChild(script); 
     } 
    };

來源

2017-09-14 09:28:59 RedCrusador

未捕獲參考錯誤：mapboxgl未定義

回答

相關問題