传单地图移出 div 标签答案

【问题标题】：leaflet map is moved out of div tag传单地图移出 div 标签
【发布时间】：2016-06-17 14:06:18
【问题描述】：

我正在尝试在 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找到。

【问题讨论】：

您需要将map id 添加到您的div。
@Ale 不需要，引用 Leaflet docs: L.Map( <HTMLElement|String> id, <Map options> options) - “实例化一个给定 div 元素（或其 id）的地图对象”。这似乎传递了一个 HTML 元素，这很好。

标签： javascript html css angularjs leaflet

【解决方案1】：

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

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

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

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

<h1>Leaflet Map Integration</h1>

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

一切都按预期进行。

【讨论】：