角度リーフレット - ディレクティブでマップが正しく読み込まれない

Question

おはようございます！

私はタイルとしてleafletjsマップ（http://tombatossals.github.io/angular-leaflet-directive/#!/）とopenstreetmapを使用するWebアプリケーションを持っています。

マップは完全に機能しますが、マーカーを追加したりレイヤーを作成したりズームしたりすることはできますが、マップがあるページにアクセスすると正しく読み込まれません。 ：

それは、私が窓またはオープンのサイズを変更してコンソールを閉じたときにリセットされます。

フォント：

ビュー：

<div class="col-md-12"> 
<div class="box_whiteframe_map"> 
    <leaflet ng-init="vm.buscaEnderecoClientesEmpresas()" center="vm.center" defaults="vm.defaults" markers="vm.markers" width="100%" height="480px"></leaflet> 
</div> 

CSS/SASS：

.box_whiteframe_map { 
background-color: #fff; 
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12); 
color: #000; 
margin: 0; 
clear: both; 

}

コントローラ：

/* MAP */ 

vm.markers = new Array(); 

vm.buscaEnderecoClientesEmpresas = function() { 
    vm.items = loadSaas(Cookies.get('crm_o2_hash')); // carregar saas id 
    vm.items.then(function(items) { // ler array de retorno 
     vm.saasid = items; 
     var dados = { 
      'saasid': vm.saasid 
     } 
     relatoriosService.carregarEnderecoClientesEmpresas(dados).then(function(response) { 
      if (response.data != 'null') { 
       vm.enderecoClientesEmpresas = response.data; 
       angular.forEach(vm.enderecoClientesEmpresas, function(value, key) { 
        if (value.tipo == 'p'){ 
         var icon = 'user'; 
        } else { 
         var icon = 'cog'; 
        } 
        vm.markers.push({ 
         group: value.cidade, 
         lat: value.lat_lng.lat, 
         lng: value.lat_lng.lng, 
         message: value.nome, 
         icon: { 
          type: 'awesomeMarker', 
          icon: icon, 
          markerColor: 'blue' 
         }, 
         label: { 
          options: { 
           noHide: true 
          } 
         } 
        }); 
       }); 
      } else { 
       vm.enderecoClientesEmpresas = ''; 
      } 

     }, function(error) { 
      console.log('Erro findSemEmail: ', error); 
     }); 
    }); 
} 

angular.extend(vm, { // EXTEND THE PROPERTIES OF MAP (MARKERS, INITIAL LOCATION..) 


    center: { // INITIAL LOCATION . 
     lat: -22.952419, 
     lng: -43.211667, 
     zoom: 4 
    }, 
    defaults: { 
     tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 
     zoomControlPosition: 'topright', 
     tileLayerOptions: { 
      opacity: 0.9, 
      detectRetina: true, 
      reuseTiles: true, 
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy <a href="http://www.openstreetmap.org/copyright">Funil PRÓ</a>', 
     }, 
     scrollWheelZoom: true, 
     minZoom: 3, 
     worldCopyJump: true 
    } 
}); 

/* MAP FINAL */ 

助けが必要ですか？ [] 'sのあなたがマップをリフレッシュする必要が

Answer 1

：別途で

leafletData.getMap().then(function(map) { 
    setTimeout(function() { 
     map.invalidateSize(); 
     map._resetView(map.getCenter(), map.getZoom(), true); 
    }, 200); 
}); 

を、あなたはコントローラにleafletDataを注入する必要があります。