Невозможно загрузить карту листовки на элемент полимера 3 - PullRequest
Новая
       14

Невозможно загрузить карту листовки на элемент полимера 3

0 голосов
/ 20 октября 2018

Итак, я пытаюсь заставить мою карту листовки загрузиться на мой полимерный 3 элемент, но у меня есть проблема, потому что мне нужен тег html div для карты, чтобы загрузить ДО моего JavaScript листовки, иначе она выдает ошибку, говорящуюдля этого нет контейнера.Я не могу найти способ сделать это, потому что я импортирую свой JavaScript, поэтому он всегда загружается первым.Мне нужен полимер, чтобы как-то позволить мне загрузить тег html перед рендерингом JavaScript.Вот код для полимерного элемента: 

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';
import './leaflet/leaflet.js';



class MyView1 extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;

          padding: 10px;
        }
      </style>

      <div class="card">
        <div class="circle">1</div>
        <h1>View One</h1>
        <div id="map" style="width: 900px; height: 500px"></div>

      </div>
    `;
  }
}

window.customElements.define('my-view1', MyView1);

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

Я не уверен, что у тебя внутри leaflet.js.Если это всего лишь пакет из листовки, проблема не в порядке загрузки, потому что листовка ничего не выполняла, пока вы не вызвали их функции.Но если он содержит ваш код инициализации.Я бы предложил вам создать функцию инициализации и вызывать ее извне.

Если вы инициализируете карту следующим образом: 

let myMap = L.map('mapId')

Вы получите Uncaught Error: Map container not found. из-за того, что вы передадите строку, leaflet будет использовать функцию document.getElementById для поиска элемента контейнера, который не может быть найден из-за Shadow DOM.К счастью, листовка позволяет вам передать HTMLElement, чтобы вы могли сделать следующее: 

let myMap = L.map(this.$.map)

Окончательный код будет выглядеть так:leaflet.js, см. Конфигурацию здесь .

И рабочий пример здесь .

0 голосов
/ 20 октября 2018

import также может быть использован asyc.Переместите ваш импорт в ready callback жизненного цикла, чтобы ваш dom точно был готов. 

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';

class MyView1 extends PolymerElement {
    static get template() {
        return html`
            <style include="shared-styles">
                :host {
                    display: block;
                    padding: 10px;
                }
            </style>

            <div class="card">
                <div class="circle">1</div>
                <h1>View One</h1>
                <div id="map" style="width: 900px; height: 500px"></div>
            </div>
    `;
  }

  ready(){
      super.ready();
      import('./leaflet/leaflet.js').then((leafletModule) => {
          //leaflet is now imported
      });
  }
}

window.customElements.define('my-view1', MyView1);
...