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

我的基于Leaflet和AngularJS的地图加载不正确。我不知道发生了什么事，但地图瓷砖没有按照应有的布置。基于Leaflet和AngularJS的地图加载不正确

这是底图：

这是我的代码：

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


     $scope.defaults= { 
      scrollWheelZoom: false 
     }; 

     $scope.tiles = 'openstreetmap'; 
    }

来源

2016-01-21 Djonatas Tenfen

http://djonatas.com .br/img0001.png –

–

实际在地图中的代码在哪里？您将Leaflet和Angular结合使用了哪个库。如果没有，你需要提供你的代码，首先绘制地图。 – bentrm

此问题经常发生由于任何父容器的大小调整而地图是已经初始化。

为了告诉地图有一个调整大小，你可以拨打map.invalidateSize();。

也可能是因为您没有手动调整任何父容器，则可能的解决方案是在文档准备好后调用map.invalidateSize();。

为了与angular-leaflet-directive做到这一点试试你的控制器中注入leafletData内的以下内容：

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

来源

2016-02-04 13:30:52

如果使用单张指令为angularjs然后

检查地图容器具有ng-cloak属性。如果它在那里删除它。

地图不加载时NG-斗篷呈现

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

地图加载时NG-斗篷不存在

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

来源

2016-03-23 06:18:05 vishnu

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

回答

相关问题