单张地图+文字示例[副本]

更新: Plunker . 我检查了重复的问题。答案不正确或缺少CSS文件。我已经为CSS和JS导入了v1.3.4,如 leaflet quick start . Plunker显示CSS包含在元素的Shadow DOM中。对我来说不是这样。同样,JS和CSS的同一版本也适用于非聚合物代码,但是,聚合物会发生失真。

this ,Github: this this 还有其他几个帖子,不幸的是仍然无法解决这个问题。在Chrome和Firefox中都进行了测试。我试过使用Openlayers,地图加载得很好。当使用传单和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放入父元素等等。

谢谢。