問題描述

更新:我現在已經在 代碼片段:

<style include="shared-styles publish-project-styles">:主持人 {顯示:塊；填充:20px；}#mapContainer{寬度:100%；高度:400px；邊框:1px 實心#0A569D；}.傳單容器{寬度:100%；高度:400px；邊框:1px 實心#0A569D；}</風格><td id="leftContainer" width="50%" style="padding: 15px;"><div id="mapContainer"></div><!-- <canvas id="mapContainer" style="width: 400px; height: 400px; 邊框: 1px solid #0A569D;"></canvas>--></td>準備好() {super.ready();讓leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {最大縮放:18}).addTo(leafmap);}

更新代碼:

<style include="shared-styles publish-project-styles">:主持人 {顯示:塊；填充:20px；}#mapContainer{寬度:100%；高度:400px；邊框:1px 實心#0A569D；}.傳單容器{寬度:100%；高度:400px；邊框:1px 實心#0A569D；}</風格><td id="leftContainer" width="50%" style="padding: 15px;"><div id="mapContainer"></div><!-- <canvas id="mapContainer" style="width: 400px; height: 400px; 邊框: 1px solid #0A569D;"></canvas>--></td>連接回調(){super.connectedCallback();讓leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {最大縮放:18}).addTo(leafmap);葉圖.invalidateSize();}

我確實嘗試過使用內聯 CSS，將 JS 放入 connectedcallback() &ready()，將 CSS 放入父元素等.

我假設，鑒于我閱讀的帖子存在一些 CSS 問題.但不確定.如果有人可以在這方面提供幫助，真的很感激?如果需要更多信息，請告訴我.

謝謝.

Leaflet CSS 樣式不適用于陰影 DOM 元素.

要使其工作，您需要在此處添加leaflet.css:

//...<link type="text/css" rel="stylesheet" ><p>我是 x-foo 的 shadow DOM 子元素.</p>//...

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

UPDATE: I have now replicated this issue in Plunker. I did check the duplicate question suggested. The answer is incorrect or missing CSS file. I have imported v1.3.4 for CSS and JS as mentioned in leaflet quick start. The Plunker shows the CSS is included in Shadow DOM of the element. This is not the case for me. Also, the same version of JS and CSS works for non-polymer code, however, the distortion occurs with Polymer.

I am struggling for several days now to get the leaflet map loaded properly within Polymer 2. This issue is taking the soul out of me now. I have searched various threads in SO: this, Github: this, this and several other posts, unfortunately still could not fix the issue. Tested in both Chrome and Firefox. I have tried with Openlayers and the map loads perfectly. The issue arises when using Leaflet and Mapbox API. Unfortunately, due to customer requirements, cannot use Openlayers.

My map renders like this: Code fragments:

<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);
}

UPDATED Code:

<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();
}

I did try with inline CSS, putting JS in connectedcallback() & ready(), putting CSS in parent element etc.

I am assuming, there is some CSS problem given the posts that I read. But not sure. Would really appreciate if someone could help in this regard? Please let me know if more info is needed.

Thanks.

Leaflet CSS styles are not applied to shadow DOM elements.

To make it work you need to add leaflet.css here:

// ...
<link type="text/css" rel="stylesheet" >

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

Working example: https://plnkr.co/edit/CJUlwUnBezum9jgt93uF?p=preview

這篇關于Leaflet + Polymer 2 使用扭曲的瓷磚加載地圖，但適用于非聚合物代碼的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！