Не удается загрузить карту буклета на полимерный элемент 3

Итак, я пытаюсь загрузить свою карту листовки в свой полимерный элемент 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);

javascript leaflet polymer polymer-3.x leaflet.draw
person Nima Sarrafzadeh    schedule 19.10.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

импорт также можно использовать как asyc. Переместите свой импорт в готовый обратный вызов жизненного цикла. как ваш дом определенно готов.

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);
person Pascal L.    schedule 20.10.2018

arrow_upward
0
arrow_downward

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

Если вы инициализируете карту, например:

let myMap = L.map('mapId')

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

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

Окончательный код будет таким:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'
import { style, map, tileLayer } from './leaflet.js'

const styleElement = document.createElement('dom-module')

styleElement.innerHTML =`
  <template>
    <style>
      ${style}
    </style>
  </template>
`

styleElement.register('shared-styles')

class MyView1 extends PolymerElement {
  static get template() {
    return html`
      <style include='shared-styles'></style>
      <div class='card'>
        <div id='map' style='width: 900px; height: 500px'></div>
      </div>
    `
  }

  ready () {
    super.ready()

    let myMap = map(this.$.map, {
      center: [51.505, -0.09],
      zoom: 13
    })

    tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      id: 'mapbox.streets'
    }).addTo(myMap)
  }
}

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

Я использую свертку для объединения leaflet.js, см. конфигурацию здесь.

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

person User 28    schedule 20.10.2018
comment
так что это не пакет из листовки, это мой собственный файл листовки, где я объявляю свою карту и тому подобное. Когда я использую let myMap = map(this.$.map, ....., я получаю сообщение об ошибке, говорящее, что $ не определено, возможно, потому что мой файл листовки не является полимерным файлом. - person Nima Sarrafzadeh; 23.10.2018
comment
Тогда вам не следует использовать this.$.map внутри вашего левого файла, вместо этого вы должны обернуть свой код функцией, такой как init, и передать элемент карты, когда вы вызываете init(this.$.map) в готовой функции. - person User 28; 24.10.2018