无法将传单图加载到聚合物 3 元素上

Question

所以我正在尝试让我的传单地图加载到我的聚合物 3 元素上，但我有一个问题，因为我需要 htmldiv 标签在我的传单 javascript 之前加载地图，否则它会抛出一个错误说没有容器。 我想不出一种方法来做到这一点，因为我正在导入我的 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);

Answer 1

导入也可以使用 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);

Answer 2

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

如果初始化地图，如下所示：

let myMap = L.map('mapId')

你会得到一个Uncaught Error: Map container not found.，因为如果你传递字符串，传单将使用document.getElementById函数来查找由于影子DOM而无法找到的容器元素。 幸运的是，传单允许你通过HTML环境，所以你可以这样做：

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

这里的工作示例。