在Angular中导航时无法离开Leaflet.js地图组件

问题描述

当我尝试离开实现传单地图的窗口/页面时，导航指向空白。退出窗口时删除地图图层似乎有问题。

定义为关闭地图窗口的按钮：

<button mat-raised-button color="primary" class="submit-button" id="removeAndBack" >Done</button>

关闭地图的功能：

document.getElementById('removeAndBack').addEventListener("click",onNavigateOut);

      function onNavigateOut() {
        if(this.map)
        this.map.remove();
        map = undefined
       
        if(map.remove){
          document.getElementById('map-container').innerHTML = "";
          this.router.navigateByUrl('/home');
        }

预期输出：应关闭实现传单地图的窗口。

当前输出：使用导航栏导航出来时，将显示空白屏幕。

错误日志：

ERROR Error: Map container is already initialized.
    at NewClass._initContainer (Map.js:1105)
    at NewClass.initialize (Map.js:136)
    at new NewClass (Class.js:22)
    at createMap (Map.js:1728)
    at leaflet.directive.ts:89
    at ZoneDelegate.invoke (zone.js:386)
    at Zone.run (zone.js:143)
    at ngzone.runOutsideAngular (core.js:27413)
    at LeafletDirective.ngOnInit (leaflet.directive.ts:86)
    at callHook (core.js:3105)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）