Uncaught SyntaxError: Cannot use import statement outside a module with OpenLayers
Uncaught SyntaxError: Cannot use import statement outside a module with OpenLayers
我刚开始使用 OpenLayers(一个开源 Java 脚本库,用于在 Web 浏览器中将地图数据显示为滑动地图)。我将它与 Thymeleaf(一个可以在 Web 和非 Web 环境中工作的 Java XML/XHTML/HTML5 模板引擎)一起使用。
我有这段代码:
<div class="windowContentMap">
<div id="map" class="map"></div>
<script>
/*<![CDATA[*/
import '/pradera/css/ol.css';
import Map from '/css/Map';
import View from '/css/View';
import TileLayer from '/css/layer/Tile';
import OSM from '/css/source/OSM';
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2
})
});
/*]]>*/
</script>
</div>
</div>
但是在线导入'/pradera/css/ol.css';
我有这个错误:
Uncaught SyntaxError: Cannot use import statement outside a module
这是因为,如错误所述,您不能在 ES6 模块外使用 import
语句。
要解决这个问题,请将 type="module"
添加到您的脚本标签中,使您的脚本成为一个模块,例如:
<div class="windowContentMap">
<div id="map" class="map"></div>
<script type="module">
/*<![CDATA[*/
import '/pradera/css/ol.css';
import Map from '/css/Map';
import View from '/css/View';
import TileLayer from '/css/layer/Tile';
import OSM from '/css/source/OSM';
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2
})
});
/*]]>*/
</script>
</div>
</div>
我刚开始使用 OpenLayers(一个开源 Java 脚本库,用于在 Web 浏览器中将地图数据显示为滑动地图)。我将它与 Thymeleaf(一个可以在 Web 和非 Web 环境中工作的 Java XML/XHTML/HTML5 模板引擎)一起使用。
我有这段代码:
<div class="windowContentMap">
<div id="map" class="map"></div>
<script>
/*<![CDATA[*/
import '/pradera/css/ol.css';
import Map from '/css/Map';
import View from '/css/View';
import TileLayer from '/css/layer/Tile';
import OSM from '/css/source/OSM';
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2
})
});
/*]]>*/
</script>
</div>
</div>
但是在线导入'/pradera/css/ol.css';
我有这个错误:
Uncaught SyntaxError: Cannot use import statement outside a module
这是因为,如错误所述,您不能在 ES6 模块外使用 import
语句。
要解决这个问题,请将 type="module"
添加到您的脚本标签中,使您的脚本成为一个模块,例如:
<div class="windowContentMap">
<div id="map" class="map"></div>
<script type="module">
/*<![CDATA[*/
import '/pradera/css/ol.css';
import Map from '/css/Map';
import View from '/css/View';
import TileLayer from '/css/layer/Tile';
import OSM from '/css/source/OSM';
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2
})
});
/*]]>*/
</script>
</div>
</div>