基于 Leaflet 和 AngularJS 的地图未正确加载

Map based on Leaflet and AngularJS not loaded correctly(基于 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);
});

这篇关于基于 Leaflet 和 AngularJS 的地图未正确加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！