0

所以我试图让我的传单地图加载到我的聚合物 3 元素上，但我遇到了一个问题，因为我需要在传单 javascript 之前加载地图的 html div 标签，否则它会抛出一个错误，说没有容器为了它。我想不出办法来做到这一点，因为我正在导入我的 javascript，所以它总是会先加载。我需要聚合物以某种方式让我在渲染 javascript 之前加载 html 标记。这是聚合物元素的代码：

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);
4

2 回答 2

0

import也可以使用 asyc。将您的导入移动到准备就绪的生命周期回调，这样您的 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);
于 2018-10-20T08:54:25.633 回答
0

我不确定你的leaflet.js. 如果它只是来自传单的捆绑包，则问题不在于加载顺序，因为传单在调用它们的函数之前没有执行任何操作。但如果它包含您的初始化代码。我建议您创建一个 init 函数并从外部调用它。

如果您像这样初始化地图：

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，请参阅此处的配置。

和工作示例在这里。

于 2018-10-20T13:36:44.447 回答