問題描述
我的基于 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);
});
這篇關于基于 Leaflet 和 AngularJS 的地圖未正確加載的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！