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

Question

我的基于Leaflet和AngularJS的地图未正确加载.我不知道发生了什么,但是地图图块并没有像它们应该的那样布局.

这是基本地图:

这是我的代码:

    function setMapPosition(){
        $scope.center = {
            lat: 51.505,
                lng: -0.09,
                zoom: 8
        };


        $scope.defaults= {
            scrollWheelZoom: false
        };

        $scope.tiles = 'openstreetmap';
    }

Answer 1

由于在映射已初始化时调整任何父容器的大小,通常会发生此问题.

为了告诉地图你可以调用调整大小map.invalidateSize();.

也可能是您没有手动调整任何父容器的大小,然后可能的解决方案是map.invalidateSize();在文档准备好后调用.

要使用angular-leaflet-directive执行此操作,请在控制器内部注入以下内容leafletData:

leafletData.getMap().then(function(map) {
    map.invalidateSize(false);
});