小编Min*_*int的帖子

我目前正在开发一个使用 LitElement 组件的应用程序。我想将 Leaflet 集成到其中，但在显示地图时遇到问题。我已经使用 npm 在我的项目中安装了 Leaflet，并创建了一个如下所示的类。

import {LitElement, html, css} from 'lit-element';
import './node_modules/leaflet/dist/leaflet';

class Map extends LitElement{

    static get styles() {
        return [css``];
    }

    constructor() {
        super();
    }
    connectedCallback() {
        super.connectedCallback();
        let map = L.map('mapid').setView([51.505, -0.09], 13);

        let urlTemplate = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
        map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
    }

    render() {
        return html`
            <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
            <div id="mapid" style="height: 100%"></div>

        `;
    }
}

customElements.define("my-map", Map);

运行我的应用程序会导致以下错误：未捕获类型错误：无法设置未定义的属性“L”。我对如何使用 Leaflet 在 LitElement 应用程序中显示地图有点迷失，并且非常感谢您能推动我走向正确的方向。