MapQuest和Leaflet插件-刷新后未显示地图

Question

我正在使用Ionic 3和Angular 5，并且想在我的应用程序上显示地图。我创建了一个地图组件，但是在刷新页面后我无法显示地图。

MapComponent

map.html

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

map.ts

基本上，我创建了一个新的原始map元素，以避免在同一HTML元素上初始化地图，这会导致Leaflet错误（“地图容器已初始化”）

ngOnInit() {
    var map: any = null;
    var mapElement = document.getElementById("map");
    mapElement.parentElement.innerHTML = '<div id="map" style="height:100%; width: 100%;"></div>';
    console.log("new map element created");
    var initMap = function () {
        console.log("init map..");
        L.mapquest.key = 'XXXXXX';
        map = L.mapquest.map('map', {
          center: [37.7749, -122.4194],
          layers: L.mapquest.tileLayer('map'),
          zoom: 15
        });
    }
    initMap();
}

结果

第一次正确显示地图。但是，当我第二次在显示地图的页面上返回时，我没有得到任何错误，但是我只得到了一个空白的div元素，就像Leaflet无法初始化地图一样。 此外，在控制台中，我看到该元素是在初始化地图之前创建的，因此它应该可以工作。

您有什么建议可以帮助我解决这个问题吗？提前致谢。

Answer 1

尝试使用ionViewDidEnter（）

ionViewDidEnter() { 
var map: any = null;
var mapElement = document.getElementById("map");
mapElement.parentElement.innerHTML = '<div id="map" style="height:100%; width: 100%;"></div>';
console.log("new map element created");
var initMap = function () {
    console.log("init map..");
    L.mapquest.key = 'XXXXXX';
    map = L.mapquest.map('map', {
      center: [37.7749, -122.4194],
      layers: L.mapquest.tileLayer('map'),
      zoom: 15
    });
}
initMap();
}

ionViewDidEnter（）每当您进入页面时都会运行，无论它是否已缓存。