未捕获的语法错误:无法在具有 OpenLayer 的模块外部使用导入语句

Question

我是使用OpenLayers(一个开源JavaScript库，用于在Web浏览器中将地图数据显示为滑溜溜的地图(的新手。我正在将它与Thymeleaf(Java XML/XHTML/HTML5模板引擎，可以在Web和非Web环境中工作(一起使用。

我有这段代码：

<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

Answer 1

这是因为，正如错误所述，您不能在 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>

阅读更多关于 ES6 模块的信息