Question

我正在尝试在我的Ionic 2应用程序中加载一个简单的传单地图。不幸的是，在移动地图之前，并非所有的瓷砖都会被装载。

this.map = new L.Map('mainmap', {
      zoomControl: false,
      center: new L.LatLng(40.731253, -73.996139),
      zoom: 12,
      minZoom: 4,
      maxZoom: 19,
      layers: [this.mapService.baseMaps.OpenStreetMap],
      attributionControl: false
    });

Answer 1

有两个解决此问题的方法：

1-在“ angular.json”的样式数组中添加"./node_modules/leaflet/dist/leaflet.css"。

2-使地图准备就绪时，尺寸无效：

onMapReady(map: L.Map) {
    setTimeout(() => {
      map.invalidateSize();
    }, 0);
}

将此添加到您的模板：

<div style="height: 300px;"
   leaflet
   (leafletMapReady)="onMapReady($event)">
</div>

这将绑定您组件中的onMapReady方法。

3-安装Typescript的传单类型：

npm install --save-dev @types/leaflet

香草JavaScript：

1-验证地图的大小：

onMapReady(map: L.Map) {
   setTimeout(() => {
     map.invalidateSize();
   }, 0);
}

2-在文档的leaflet/dist/leaflet.css中添加传单样式表<head>。

Answer 2

这对我来说很好：

this.map = L.map('map');
const self = this;
    
this.map.on("load",function() { setTimeout(() => {
   self.map.invalidateSize();
}, 1); });
    
this.map.setView([36.3573539, 59.487427], 13);

LeafletJS在移动地图之前不加载所有瓷砖

2 个答案: