gpt4 book ai didi

angularjs - LeafletJS 在移动 map 之前不会加载所有图 block

转载 作者:太空狗 更新时间:2023-10-29 18:17:04 25 4
gpt4 key购买 nike

我正在尝试在我的 Ionic 2 应用程序中加载一个简单的传单 map 。不幸的是,在移动 map 之前,并不是所有的图 block 都被正确加载。

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
});

enter image description here

最佳答案

这个问题有几个解决方案:

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

2- map 准备就绪时使大小无效:

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

将此添加到您的模板:

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

这将绑定(bind) onMapReady您在组件中拥有的方法。

3- 为 Typescript 安装 Leaflet 类型:

npm install --save-dev @types/leaflet

原生 JavaScript:

1- 验证 map 的大小:

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

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

关于angularjs - LeafletJS 在移动 map 之前不会加载所有图 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38832273/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com