传单地图移出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();

这里提到Leaflet Map not showing in bootstrap div但这没有帮助。

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

Answer 1

我找到了解决方案。在开始时有这样的声明：

  

确保地图容器具有已定义的高度，例如   在CSS中设置它。

在那里只提到重要的坏事。

我改变了＃34; E＆＃34;的指令类型。到＆＃34; EA＆＃34;。这样就可以将模板更改为

<h1>Leaflet Map Integration</h1>

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

一切都按预期工作。