小冊子地圖被移出div標籤

我試圖在div標籤內顯示小冊子地圖。不幸的是它被移出標籤。小冊子地圖被移出div標籤

這是我的角度指令：

import L from 'leaflet'; 
import esri from 'esri-leaflet'; 
import 'leaflet/dist/leaflet.css'; 

class MapDirective { 

    constructor() { 
     this.resctrict = 'E'; 
     this.controller = MapController; 
    } 

    link(scope, element) { 

     let map = L.map(element[0]).setView([51.505, -0.09], 8); 

     esri.tiledMapLayer({ 
      url: "https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer" 
     }).addTo(map); 


    } 

    /** 
    * @returns {MapDirective} 
    */ 
    static directiveFactory() { 
     return new MapDirective(); 
    } 
}

這是我的HTML模板代碼：

<h1>Leaflet Map Integration</h1> 

<div style="width: 500px; height: 500px"> 
    <map></map> 
</div>

我已經嘗試過加入

map.invalidateSize();

這裏提到Leaflet Map not showing in bootstrap div但這並沒有幫助。

完整的項目代碼可在github找到。

來源

2016-06-17 BetaRide

您需要將'map' id添加到您的div。 – Ale

@Ale無需爲此引用[Leaflet文檔]（http://leafletjs.com/reference.html#map-l.map）：'L.Map（ id，選項）' - 「給定一個div元素（或其ID）的實例化地圖對象」。這似乎通過一個HTML元素，這很好。 – Jieter

我找到了解決方案。在開始有這樣的說法：

確保地圖容器有一個定義的高度，例如設置它在CSS中。

壞東西，重要的只是在那裏提到。

我將指令類型從「E」更改爲「EA」。這可以將模板更改爲

<h1>Leaflet Map Integration</h1> 

<div> 
    <div map style="height: 500px"></div> 
</div>

而且一切都按預期工作。

來源

2016-06-17 18:10:35 BetaRide

小冊子地圖被移出div標籤

回答

相關問題