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

Answer 2

如果您對angularjs使用letletlet指令，則

檢查您的地圖容器是否具有ng-cloak屬性。 如果有，請將其刪除。

ng-cloak出現時地圖未加載

<div class="map-container" ng-cloak>
<leaflet class="map-container" markers="markers" lf-center="center" width="100%">
</leaflet>
</div>

不存在ng-cloak時加載地圖

<div class="map-container">
  <leaflet class="map-container" markers="markers" lf-center="center" width="100%">
  </leaflet>
</div>