Angular-Leaflet-Directive的映射加载不正确

Question

早上好!

我有一个web应用程序，其中我使用leafletjs地图(http://tombatossals.github.io/angular-leaflet-directive/#!/)和openstreetmap作为磁贴。

地图运行良好，我可以以任何方式交互(添加标记、创建图层、缩放...)，但是，当我访问地图所在的页面时，根据下面的printscreen，它不能正确加载：

​

​

当我调整窗口大小或打开和关闭控制台时，它会重置。

字体：

查看：

<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 */

有帮助吗？[]的

Answer 1

您需要刷新地图：

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

此外，您还需要将leafletData注入控制器。

Answer 2

您需要添加leaflet css

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">