传单地图移出div标签

Question

我试着在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();

这里提到了单张地图没有显示在引导页上，但这并没有帮助。

完整的项目代码可以在github上找到。

Answer 1

我找到了解决办法。在开始的时候，有这样的说法：

确保映射容器具有定义的高度，例如，通过在CSS中设置它。

最重要的事情只会在这里被提及。

我将指令类型从"E“改为"EA”。这样就可以将模板更改为

<h1>Leaflet Map Integration</h1>

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

一切都如期而至。