HTML 页面未执行外部 JavaScript 文件

Question

预期结果：

我对以下脚本的理解是，我应该能够取消注释 HTML 页面脚本部分中的 //src="PAWSmap.js"; 行，请参阅应该的 JavaScript 文件定义我想要的地图。

这意味着 JavaScript 文件将处理地图和未来数据，而 HTML 将仅引用该文件来显示它。

结果：

然而，当我按照上述逻辑进行操作时，地图框并未显示在 Web 浏览器中。

它确实在我运行 HTML 时出现，如下所示，其中地图设置和 var 创建在 HTML 脚本中进行。

尽管我遵循了两个教程，这些教程建议我应该能够实现“预期”方法，但我已经密切关注了它们。

const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';

var map = L.map('map',{
    center: [43.64701, -79.39425],
    zoom: 15
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <title>Document</title>

    <style>
        #map{
            height: 800px;
            width: 800px;
            margin: 5rem auto;
        }
    </style>

    <h2>
        Critiacally Listed Species in BC
    </h2>


</head>
<body>

    <div id="map"></div>

<script>

    //src="PAWSmap.js";

    var map = L.map('map',{
    center: [54.259070, -124.943178],
    zoom: 6
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

</script>
    
</body>
</html>

问题：

为什么对 JavaScript 地图文件的引用不起作用，而在 HTML 中创建地图框却起作用？

Answer 1

从您的 HTML 页面加载外部 JavaScript 文件的语法是：

<script src="path/to/file.js"></script>

注意src 属性及其值是在 <script>标签尖括号内，不是作为 child（即不在开始和结束标签之间）。

有关语法和可能的属性的更多详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script。

HTML 页面未执行外部 JavaScript 文件

HTML page not executing external JavaScript file

html

leaflet