javascript – Leaflet Polymer 2地图加载扭曲的瓷砖,但适用于非聚合物代码

更新：
我现在已经在Plunker复制了这个问题.我确实检查了建议的重复问题.答案是错误的或缺少CSS文件.我已经为leaflet quick start中提到的CSS和JS导入了v1.3.4.Plunker显示CSS包含在元素的Shadow DOM中.对我来说情况并非如此.此外,相同版本的JS和CSS适用于非聚合物代码,但是,聚合物会发生扭曲.

我现在正在奋斗好几天才能在聚合物2中正确加载传单地图.这个问题现在让我的灵魂脱离了我.我搜索了SO中的各种主题：this,Github：this,this以及其他一些帖子,遗憾的是仍无法解决问题.在Chrome和Firefox中都经过测试.我尝试过Openlayers,地图加载完美.使用Leaflet和Mapbox API时会出现此问题.遗憾的是,由于客户的要求,无法使用Openlayers.

我的地图呈现如下：
代码片段：

<style include="shared-styles publish-project-styles">
    :host {
    display: block;
    padding: 20px;
  }
    #mapContainer{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }

    .leaflet-container{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }
</style>

<td  id="leftContainer" width="50%" style="padding: 15px;">
 <div id="mapContainer"></div>
 <!-- <canvas id="mapContainer" style="width: 400px; height: 400px; border: 1px solid #0A569D;"></canvas> --></td>

ready() {
    super.ready();          
    let leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(leafmap);
}

更新代码：

<style include="shared-styles publish-project-styles">
    :host {
    display: block;
    padding: 20px;
  }
    #mapContainer{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }

    .leaflet-container{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }
</style>

<td  id="leftContainer" width="50%" style="padding: 15px;">
 <div id="mapContainer"></div>
 <!-- <canvas id="mapContainer" style="width: 400px; height: 400px; border: 1px solid #0A569D;"></canvas> --></td>

connectedCallback() {
    super.connectedCallback();          
    let leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(leafmap);
    leafmap.invalidateSize();
}

我尝试使用内联CSS,将JS放入connectedcallback()& ready(),将CSS放在父元素等中.

我假设,鉴于我读过的帖子,有一些CSS问题.但不确定.如果有人能在这方面提供帮助,我真的很感激吗？如果需要更多信息,请告诉我.

谢谢.

解决方法:

Leaflet CSS样式不适用于shadow DOM元素.

为了使它工作,你需要在这里添加leaflet.css：

// ...
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">

<p>I'm a shadow DOM child element of x-foo.</p>
// ...

工作范例：
https://plnkr.co/edit/CJUlwUnBezum9jgt93uF?p=preview

标签：javascript,css,leaflet,polymer
来源： https://codeday.me/bug/20191002/1841929.html