Uncaught SyntaxError：无法在带有OpenLayers的模块外部使用import语句

Question

我是OpenLayers的新手（OpenLayers（一个开放源代码的JavaScript库，用于在网络浏览器中将地图数据显示为草绘地图）。我将其与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>