我已经添加了所有必需的脚本，config.js，它有我的 API_KEY 但是它一直告诉我“未捕获的语法错误:意外的 token ”。我已经多次检查我的 api key ，它似乎是正确的。
这是我的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()
城市、aqi 等...是我发送到 index.html 的列表
index.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
最佳答案
注意错误。它说意外标记出现在 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>
关于javascript - 未捕获的语法错误 : Unexpected token when using leaflet with flask，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56454741/