Question

我以这种方式动态加载Mapbox-GL JS：

        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);

然后在某些时候，我在＆＃39; instantiateMap＆＃39;中按如下方式访问它。功能：

        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文件中。

我知道库加载正常，因为我在Sources的左侧面板中看到它，但我不知道为什么在访问mapboxgl对象时会出现此错误。

此外，我尝试以类似的方式包含其他库（jQuery，mapbox.js）并且它们工作正常。

任何帮助都将受到高度赞赏！

Answer 1

没有看到源代码，我无法测试或修复错误。

我的猜测是，由于脚本的大小或代码的顺序，脚本在实例化之前未加载。

我个人会使用回调函数来确保实例化仅在文件完全下载（未测试）时发生

    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);
      }
    };

Answer 2

当然，js脚本已在加载依赖项之前运行。

Answer 3

要在 express 中解决此问题：在发回的响应中，添加以下内容

res.status(200).set(
      'Content-Security-Policy',
      'connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com'
    ).render('whatever', {} );

未捕获的参考错误：mapboxgl未定义

3 个答案: