Uncaught SyntaxError: неожиданный токен при использовании листовки с колбой
Я добавил все необходимые сценарии, config.js, у которого есть мой API_KEY, однако он продолжает говорить мне «Uncaught SyntaxError: Unexpected token». Я несколько раз проверял свой ключ API, и он кажется правильным.
Это мой файл Python
app.route("/")
def index():
"""Return the homepage."""
return render_template("index.html", cities=cities, aqi=aqi, CO=CO, NO2=NO2, SO2=SO2, PM25=pm25)
if __name__ == "__main__":
app.run()
города, аки и т. д. — это списки, которые я отправляю на index.html.
индекс.html:
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Air-Quality</title>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel = "stylesheet" href = "../static/css/style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css"></script>
<!-- My on scrape for lists -->
<!-- Sending lists to JS from python -->
<script>
var cities = {{cities|tojson}};
var aqi = {{aqi|tojson}};
var CO = {{CO|tojson}};
var NO2 = {{NO2|tojson}};
var SO2 = {{SO2|tojson}};
var PM25 = {{PM25|tojson}};
</script>
</head>
<body>
<div class = "text-center main globe">
</div>
и код javascript, который вызывает листовку
var myMap = L.map('globe', {
center:[45.5017, -73.5673],
zoom:1
});
L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token = {accessToken}", {
maxZoom: 18,
id: "mapbox.streets-basic",
accessToken: API_KEY
}).addTo(myMap);
пути к файлам все правильные. Мне очень интересно, что я делаю не так. Заранее спасибо.
полная ошибка:
leaflet.css:3 Uncaught SyntaxError: Unexpected token .
leaflet.js:5 Uncaught Error: Map container not found.
at i._initContainer (leaflet.js:5)
at initialize (leaflet.js:5)
at new i (leaflet.js:5)
at Object.t.map (leaflet.js:5)
at draw_globe.js:3
насколько я понимаю, стек трассирует полное сообщение об ошибке. Я отредактировал это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обратите внимание на ошибки. В нем говорится, что неожиданный токен встречается в leaflet.css в строке 3. Проблема здесь в том, что вы пытаетесь загрузить файл CSS как javascript. Это не сработает. Вам нужно указать таблицу стилей с тегом <link>. Итак, вместо:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css"></script>
Ты должен сделать:
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
Обратите внимание, что URL-адрес заканчивается на .css вместо .js (поэтому вам нужно включить его таким образом). Вещи, оканчивающиеся на .js, должны быть включены с помощью тегов <script>, как вы сделали с
<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
о, так все css связаны с тегом ссылки, а js с тегом script?
Да, это правильно. Вы также можете @import импортировать файл CSS из CSS, но просто используйте <link>.
Можете ли вы опубликовать полную трассировку стека.