未明错误:传单必须在传单热图插件之前加载。

Question

我想用heatmapjs和传单创建一个热图。但是，我仍然无法加载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。如果在脚本标记上使用异步属性，则无法保证加载它们的顺序。若要解决您的问题，请省略异步属性：

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