基于 Leaflet 和 AngularJS 的地图未正确加载
我的基于 Leaflet 和 AngularJS 的地图没有正确加载.我不知道发生了什么,但地图图块没有按应有的方式布置.
My map based on Leaflet and AngularJS is not loading correctly. I do not know what's going on but the maps tiles are not laid out as they should be.
这是底图:
这是我的代码:
function setMapPosition(){
$scope.center = {
lat: 51.505,
lng: -0.09,
zoom: 8
};
$scope.defaults= {
scrollWheelZoom: false
};
$scope.tiles = 'openstreetmap';
}
推荐答案
这个问题通常是由于在地图已经初始化时调整了任何父容器的大小.
This problem often occurs due to resizing of any parent container while the map is already initialized.
为了告诉地图有调整大小,您可以调用 map.invalidateSize();
.
In order to tell the map that there was a resize you can call map.invalidateSize();
.
也可能是您没有手动调整任何父容器的大小,那么可能的解决方案是在文档准备好后调用 map.invalidateSize();
.
It could also be that you didn't resize any parent container manually, then a possible solution would be to call map.invalidateSize();
after your document is ready.
要使用 angular-leaflet-directive 执行此操作,请在控制器中尝试以下操作注入 leafletData
.:
To do this with the angular-leaflet-directive try the following inside your controller which injects leafletData
.:
leafletData.getMap().then(function(map) {
map.invalidateSize(false);
});
相关文章