时间戳

首页 > 解决方案 > 未捕获的语法错误：无法在具有 OpenLayers 的模块外部使用 import 语句

javascript - 未捕获的语法错误：无法在具有 OpenLayers 的模块外部使用 import 语句

问题描述

我是使用 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

标签： javascripthtmlthymeleafopenlayerses6-modules

解决方案

这是因为，正如错误所述，您不能import在 ES6 模块之外使用该语句。

为了解决这个问题，通过添加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 模块的信息

推荐阅读