LeafletJS在移动地图之前不会加载所有图块
rak*_*ete 3 angularjs leaflet ionic-framework ionic2 angular
我正在尝试在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
});
有两个解决此问题的方法：
1-"./node_modules/leaflet/dist/leaflet.css"在“ angular.json”中添加样式数组。
2-地图准备好后，尺寸无效：
onMapReady(map: L.Map) {
setTimeout(() => {
map.invalidateSize();
}, 0);
}
将此添加到您的模板：
<div style="height: 300px;"
leaflet
(leafletMapReady)="onMapReady($event)">
</div>
这将绑定onMapReady您组件中的方法。
3-安装Typescript的Leaflet类型：
npm install --save-dev @types/leaflet
香草JavaScript：
1-验证地图的大小：
onMapReady(map: L.Map) {
setTimeout(() => {
map.invalidateSize();
}, 0);
}
2-leaflet/dist/leaflet.css在<head>文档的中添加传单样式表。
| 归档时间： |
|
| 查看次数： |
2873 次 |
| 最近记录： |