时间戳

首页 > 解决方案 > 如何使用 Shadow DOM 中的 div 作为 Leaflet 地图容器？

javascript - 如何使用 Shadow DOM 中的 div 作为 Leaflet 地图容器？

问题描述

下面基于 JS 的自定义元素似乎可以工作，但找不到mapid我添加到影子 DOM 根的 div。Leaflet 或自定义元素中是否有办法允许库存 Leaflet（撰写本文时最新的 1.4 版）查找和使用基于影子 DOM 的mapiddiv？

错误：

Uncaught Error: Map container not found.
    at NewClass._initContainer (Map.js:1102)
    at NewClass.initialize (Map.js:136)
    at new NewClass (Class.js:22)
    at Module.createMap (Map.js:1717)
    at new GDMap (gd-map.js:16)
    at gd-map.js:30
    at gd-map.js:31

我正在采用这种方法，这只是Leaflet在dom根中寻找mapid div而在shadow dom中找不到它的情况。

Javascript

import * as L from './leaflet/leaflet-src.esm.js';

(function () {
    class GDMap extends HTMLElement {
        constructor() {
            super();

            this.attachShadow({ mode: 'open' });
            this.shadowRoot.innerHTML = `<div style="height:180px" id="mapid"></div>`;

           var map = L.map('mapid').setView([51.505, -0.09], 13);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

            }).addTo(map);


            L.marker([51.5, -0.09]).addTo(map)
                .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                .openPopup();

        }
    }
    window.customElements.define('geodex-map', GDMap);
})();

如所指出的那样编辑帖子以对齐 div id.. 仍然是同样的问题。

标签： javascriptleafletcustom-element

解决方案

尝试在其容器位于 DOM 之前实例化 Leaflet 映射是一个已知问题，具有已知解决方案：

<div id="leafletmap">必须在调用之前添加到dom中L.map('leafletmap')。

但是您已经知道这一点，因为您提出了一个非常好的和具体的问题：

[Leaflet 1.4] 中有没有办法找到和使用基于影子 DOM 的mapiddiv？

答案是“不，但是”。

如果您仔细阅读 Leaflet API 参考，您会注意到 aL.Map可以通过两种方式实例化：或者通过提供将id成为HTMLElement地图容器的 ，或者通过提供容器的HTMLElement实例。

换句话说，类似于以下内容：

var mapdiv = document.createElement('div');
shadow.appendChild(mapdiv);
var map = L.map(mapdiv)

推荐阅读