javascript - 传单 map 已移出 div 标签

Question

我正在尝试在 div 标记内显示传单 map 。不幸的是，它被移出了标签。

这是我的 Angular Directive(指令):

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 找到.

Answer 1

我找到了解决方案。在入门中有这样的声明:

Make sure the map container has a defined height, for example by setting it in CSS.

糟糕的是，这里只提到了重要的事情。

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

<h1>Leaflet Map Integration</h1>

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

一切都按预期工作。