0

我正在使用 Ionic 3 和 Angular 5，我想在我的应用程序上显示地图。我创建了一个地图组件，但在页面刷新后显示地图时遇到了麻烦。

地图组件

地图.html

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

地图.ts

基本上，我创建了一个新的原始地图元素，以避免在同一个 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 无法初始化地图。此外，在控制台中，我看到元素是在地图初始化之前创建的，所以它应该可以工作。

你有什么意见可以帮助我解决这个问题吗？提前致谢。

4

1 回答 1

0

尝试使用 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() 会在您进入页面时运行，无论它是否被缓存。

于 2018-07-19T09:37:00.520 回答