javascript - Angular 8 : Leaflet map is undefined when we leave and enter back to page

Question

在我的 ngOnInit 生命周期中，我使用传单创建了一个 map 。

HTML

 <div id="map" style="width:100%;height:100%"></div>

TS

import * as L from 'leaflet';


  ngOnInit() {
  this.map = map('map').setView([38.914764662971436, -97.01461108304595], 13);


    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(this.map);
}

之后，我加载了一些数据并使用 L.marker...addTo 显示图标......一切正常。 当我转到其他页面时发生问题，然后重新进入具有传单 map 的上一页， map 已加载并且我可以看到它，但没有创建图标并且 this.map变量未定义。

我是否需要以某种方式在 ngOnDestroy 生命周期中完全删除 map ？传单似乎将 map 保存在内存中或其他东西中，然后重复使用它而不是创建新 map 。

这是一个 Stackblitz 演示..很奇怪...即使我创建了 samoe 代码，它也能在那里工作.. https://stackblitz.com/edit/angular-leaflet-map

Answer 1

好的，问题不在于创建 map 。

发生这种情况是因为在创建 map 之前获取数据:

第一次打开组件:

• 数据从 API 加载并以异步方式保存在存储中
• map 已创建
• 创建 map 后获取数据，然后添加标记

第二次打开组件:

• 不是调用 API，而是从存储中获取数据
• 在创建 map 之前获取数据
• map 已创建
• 没有显示任何标记，因为没有创建 map

我做了什么来修复它？在添加终端之前等待创建 map 。