Question

我想使用heatmapjs和leaflet创建一个热图。但是，我被困在加载Javascript文件。我的控制台中的错误大约是2次中的1次：

leaflet-heatmap.js:23 Uncaught Error: Leaflet must be loaded before the leaflet heatmap plugin
    at leaflet-heatmap.js:23
    at leaflet-heatmap.js:28

所以有一半时间它正确加载，但另一半没有。

我尝试使用不同线程中建议的不同选项，但都没有。

<script src="<?=base_url()?>leaflet/leaflet-src.js"></script>
    <script type="text/javascript">
        var myScript = document.createElement('script');
        myScript.setAttribute('src', '<?=base_url()?>assets/js/plugins/heatmap.js');
        document.head.appendChild(myScript);

        myScript.onload = function() {
            var script = document.createElement('script');
            script.src = "<?=base_url()?>assets/js/plugins/leaflet-heatmap.js";
            script.async = true;
            document.head.appendChild(script);
        };
    </script>

或

<script async src="<?=base_url()?>assets/js/plugins/heatmap.js"></script>
<script src="<?=base_url()?>leaflet/leaflet-src.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(event) {
        var script = document.createElement('script');
        script.src = "<?=base_url()?>assets/js/plugins/leaflet-heatmap.js";
        script.async = true;
        document.head.appendChild(script);
    });
</script>

或

<script async src="<?=base_url()?>assets/js/plugins/heatmap.js"></script>
<script src="<?=base_url()?>leaflet/leaflet-src.js"></script>
<script async src="<?=base_url()?>assets/js/plugins/leaflet-heatmap.js"></script>

Answer 1

您的脚本代码需要按特定顺序加载。需要首先加载 leaflet.js 。如果在脚本标记上使用 async 属性，则无法保证它们的加载顺序。要解决您的问题，请省略 async 属性：

<script src="<?=base_url()?>assets/js/plugins/heatmap.js"></script>
<script src="<?=base_url()?>leaflet/leaflet-src.js"></script>
<script src="<?=base_url()?>assets/js/plugins/leaflet-heatmap.js"></script>

未捕获错误：必须在传单热图插件之前加载传单

1 个答案: