为什么我的外部脚本无法在 HTML 中运行？

发布于 2025-01-19 22:41:38 字数 2102 浏览 2 评论 0原文

我是编码的新手。

基本上，我正在尝试在HTML中使用以下外部JS文件，但是当我将其包含在HTML文件中时，它不起作用：

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/satellite-v9',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoidGhhaWxlZSIsImEiOiJjbDFxYmUzZGwxZWFzM2lxcjJkOWNmZmlsIn0.B57x2tvc2UbNrR1jdV0nrg'
}).addTo(map);

但是当我将这些代码包含在html中的同一脚本标签中时，它会起作用吗？我的HTML代码下面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <meta name="description" content="thai Yik Lee Portfolio">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>

        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    </head>

    <body>
        <h1>MAP</h1>
        <div id="map" style="height: 500px">
            Here
        </div>
        
        <script src="/libs/map.js" type="text/javascript"></script>
    </body>
</html>

任何帮助都将不胜感激，谢谢！

原文

I'm quite new to coding.

Basically, I'm trying to use the below external JS file in my HTML but it doesn't work when I include this in my HTML file:

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/satellite-v9',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoidGhhaWxlZSIsImEiOiJjbDFxYmUzZGwxZWFzM2lxcjJkOWNmZmlsIn0.B57x2tvc2UbNrR1jdV0nrg'
}).addTo(map);

But when I include these codes in the same script tag in HTML, it works? My html code below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <meta name="description" content="thai Yik Lee Portfolio">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>

        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    </head>

    <body>
        <h1>MAP</h1>
        <div id="map" style="height: 500px">
            Here
        </div>
        
        <script src="/libs/map.js" type="text/javascript"></script>
    </body>
</html>

Any help is appreciated, thank you!

分享到QQ

分享到微博