Angular 2 Leaflet：地图容器已经初始化答案

【问题标题】：Angular 2 Leaflet : Map container is already initializedAngular 2 Leaflet：地图容器已经初始化
【发布时间】：2016-09-28 15:54:28
【问题描述】：

我通过TSD 导入传单 Typescript 命名空间来初始化地图，但每次实例化新组件（包含地图）时重新初始化地图时都会遇到一些问题。这是组件的代码：

    import { Component, Input, OnInit} from '@angular/core';

    import { MapDetail } from './map';

    @Component({
        selector:'map-detail',
        templateUrl: 'views/map.html'
    })
    export class MapDetailComponent implements OnInit {
        @Input()   map: MapDetail;

        ngOnInit(): void {

            var div = document.getElementById('map');
            var mymap : L.Map = L.map(div, {
                center: L.latLng(47.137,  1.890),
                zoom: 7,    
                dragging: true,
                [More options ...]
            });

        var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?', {
                minZoom: 3,
                maxZoom: 18,
            });


            tileLayer.addTo(mymap);
        }
    }

还有 HTML：

<div id="mapid"></div>

非常感谢任何想法/提示。

UPDATE ：ngOnInit 被调用两次。我以前使用服务调用它。现在因为它是一个空白页面，所以我直接调用这个组件。

UPDATE 2：似乎与这个问题有关https://github.com/angular/angular/issues/6782 有什么已知的解决方法吗？

【问题讨论】：

标签： angular leaflet

【解决方案1】：

您可以简单地将您的div 或mymap 记录在您班级的私有成员中，并且仅当该成员为undefined 时才初始化映射。

但是，如果您的页面上有该组件的多个实例，您可能仍然会遇到问题。我不确定 Shadow DOM 如何处理具有相同 ID 的 div 的组件？

或者在使用 Leaflet 初始化之前先检查地图容器是否为空。

【讨论】：

我添加了 HTML。该成员将永远不会未定义，因为它存在。我可以检查一下里面是否有内容，但我不确定这是不是有角度的方法。并且不确定 Shadow DOM 是什么。让我去找。
这个解决方案对我不起作用。当我实例化一个新组件时，构造函数和 ngnit 函数都会重新运行。每次都说private成员是未定义的，所以还是会报错。
@carpiediem 你可能对此感兴趣：stackoverflow.com/questions/42428251/…
@ghybs 非常感谢，我会试试看。
@carpiediem 感谢您的反馈，很高兴它对您有所帮助！随意投票。

【解决方案2】：

你也可以试试这个来实现地图： https://angular-maps.com/

【讨论】：

有没有办法使用 OSM 代替谷歌地图？