javascript index.html无法读取main.js

7cjasjjr 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(179)

我试图建立一个简单的Map应用程序。我写了一些代码行，并有索引文件不读取main.js的问题
下面是index.html：

var mapView = new ol.View({
  center: ol.proj.fromLonLat([16.631927, 52.277821]),
  zoom: 8
});

var map = new ol.Map({
  target: 'map',
  view: mapView
});

var osmTile = new ol.layer.Tile({
  title: 'Open Street Map',
  visible: true,
  source: new ol.source.OSM()
});

map.addLayer(osmTile);

#map {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<!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">
  <title>WebgisOL</title>
  <link rel="stylesheet" href="resources/ol/ol.css">
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div id="map"></div>
  <script src="resources/ol/ol.js"></script>
  <script src="main.js"></script>
</body>

</html>

devtools中出现错误：
未捕获的语法错误：无法在main.js之外使用import语句：1模块api.maptiler.com/tiles/hillshade/9/304/664.webp?key=get_your_own_D6rA4zTHduk6KOKTXzGB:1加载资源失败：服务器以状态400（）响应

JavaScript

来源：https://stackoverflow.com/questions/76038376/index-html-does-not-read-main-js

1条答案

按热度按时间

yacmzcpb1#

下面是一个使用Leaflet库使用OpenStreetMap的简单示例。
index.html

<!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">
    <title>WebgisOL</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
</head>
<body>
    <div class="map"></div>
    <script src="main.js"></script>
</body>
</html>

main.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.map {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

main.js

var map = L.map(document.querySelector('.map'), {
    center: [16.631927, 52.277821],
    zoom: 10,
});

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

如果你想使用MapTiler，然后阅读他们的documentation，那里的一切都用例子展示。

赞(0）回复(0）举报 2023-04-19

我来回答

javascript index.html无法读取main.js

1条答案

相关问题

热门标签

最新问答