Блог

Главная - Вопросы по программированию - Создание объекта из es6 и использование в js-файле с картой openlayers

Создание объекта из es6 и использование в js-файле с картой openlayers

#javascript #ecmascript-6 #openlayers

#javascript #ecmascript-6 #openlayers

Вопрос:

я хочу создать собственный API, я создал класс и объект с помощью es6 и с использованием javascript core.

когда я запускал этот код с помощью npm, получил эту ошибку; Неперехваченная ошибка ссылки: сопоставитель не определен

Как вы думаете, где я получаю ошибку?

index.js ; Функция OpenLayers в коде

 import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

window.onload = config;
let mapper;

function config() {
    mapper = new IMapper();
}

export class IMapper{
    constructor(){
    }

   initMap () {
        const map = new Map({
            target: 'map',
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 0
            })
        });
    }
}

index.html ; вызвал код es6 в ядре js, и я получил эту ошибку

 <html>
<head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
        #map {
            width: 400px;
            height: 250px;
        }
    </style>
    <script type="module" src="index.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    mapper.initMap();
</script>
</body>
</html>

package.json

  {
  "name": "ol-parcel",
  "version": "1.0.0",
  "description": "Example using OpenLayers with Parcel",
  "scripts": {
  "start": "parcel index.html",
  "build": "parcel build --public-url . *.html *.js"
  },
    "dependencies": {
    "ol": "^5.1.2"
  },
  "devDependencies": {
        "parcel-bundler": "^1.9.4"
  }    
}

Спасибо за ответы…

Ответ №1:

Вам нужно фактически вызвать вашу config функцию.

 window.onload = config();

Комментарии:

1. Вероятно, потому, что эта строка сломана: mapper.initMap(); Вы не должны полагаться на то, что mapper определен в статической разметке. Вместо этого вы должны сделать это в своем компоненте, где вы можете контролировать, что и когда загружается.

2. Привет @jmargolisvt, я не думаю, что это проблема. С window.onload = config(); помощью они просто присваивали undefined бы window.onload , потому config что функция ничего не возвращает. Я уверен, что window.onload это вызывается браузером после запуска встроенного JS-кода mapper.initMap(); .

3. Согласен, @PatrickHund, это то, что я пытался сказать в своем втором комментарии.

Метки: